htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
Header Tags and More...


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


epiGamer
New User

Sep 4, 2002, 11:08 AM

Post #1 of 2 (4609 views)
Shortcut
Header Tags and More... Can't Post

Hey everyone. Just downloaded htmlArea and it looks like a great piece of software. I have a two questions though...

1. Is there anyway I can add buttons which add the equivelent of h1 and h2 tags? I can add the buttons in the editor.js file, but have no idea how to get them to execute code in order to add the tags.

2. Is there anyway to remove the Font Face and Font Size tags, and simply have the font default to Verdana size 2? In addition becuase some people will be using MS Word to copy and paste things into htmlArea is there anyway to get the script to convert any text not in Verdana/2 to that font and size?

Thanks guys, great product Smile

Anthony Williams
epiGamer


Dave
Staff / Moderator


Sep 4, 2002, 4:13 PM

Post #2 of 2 (4587 views)
Shortcut
Re: [epiGamer] Header Tags and More... [In reply to] Can't Post


Quote
1. Is there anyway I can add buttons which add the equivelent of h1 and h2 tags? I can add the buttons in the editor.js file, but have no idea how to get them to execute code in order to add the tags.



There's a function called "editor_insertHTML" that makes it easy to insert text or HTML into the editor or wrap them around the selected content. There's some sample links in the "example.html" editor page that show how this works. Also there's a good thread here on adding buttons. Here's a simple button that will wrap the selected text in <h1> and </h1>. Just add this code after the insert image button (be sure to remove linebreaks added by the forum, it all goes on one line).

+ '<button title="H1" class="btn" onClick="editor_insertHTML(\'' +objname+ '\',\'<H1>\',\'</H1>\')" unselectable="on"><font face=wingdings size=4>}</font></button>'

It's a little messy because we need to backslash our quotes since we're in a quoted string, but hopefully it makes some sort of sense! : )


Quote
2. Is there anyway to remove the Font Face and Font Size tags, and simply have the font default to Verdana size 2? In addition becuase some people will be using MS Word to copy and paste things into htmlArea is there anyway to get the script to convert any text not in Verdana/2 to that font and size?



You can remove the font face and size pulldowns by commenting them out in the editor_generate function. As far as removing existing font tags, that might be a little tricky. You could parse out font tags in your CGI application but Word may also specify them as style attributes in div and span tags so I'm not sure how you could get them all. There's is a built in function called "RemoveFormat" that removes all formatting but it removed everything including font face, size, bold, colors, etc. So I'm not sure if that would do what you want. If you want to give it a try, though, add this code to the bottom of "editor_updateUI", just before the last curly brace.

// remove all formatting
var oldRange = editdoc.selection.createRange();
var newRange = editdoc.body.createTextRange();
newRange.select();
editdoc.execCommand('RemoveFormat');
oldRange.select();

It seems to leave alignment, bullets, tables and a few others things intact.

Hope that helps!

Dave Edis - Senior Developer
interactivetools.com

 
 
 


Search for (options)