Custom Tags with execCommand

[E J]

Does anyone know of a way to wrap custom tags around selected text
using execCommand or otherwise?

I am developing a rich text editor for use in a web site and while
there are a few decent ones already floating around I need to
implement a few extra bits of functionality. Specifically tool tips.
Idealy I'd like to wrap custom tags around selected text using
execCommand.

Ie "Selected Text"

becomes:

"<a title='User inputed tooltip'>Select ed Text</a>".

Any ideas?
------------------------------------------------------------
Programming is like sex, one mistake and you have to support it for
the rest of your life. (Michael Sinz)

[Fox]

Re: Custom Tags with execCommand



E J wrote:[color=blue]
>
> Does anyone know of a way to wrap custom tags around selected text
> using execCommand or otherwise?
>
> I am developing a rich text editor for use in a web site and while
> there are a few decent ones already floating around I need to
> implement a few extra bits of functionality. Specifically tool tips.
> Idealy I'd like to wrap custom tags around selected text using
> execCommand.
>
> Ie "Selected Text"
>
> becomes:
>
> "<a title='User inputed tooltip'>Select ed Text</a>".
>
> Any ideas?[/color]

you don't need execCommand with this -- and you don't need it for
everything you will use in a richtext editor.

this little demo is strictly "the basics"...it applies *only* to IE6+
(as far as i know)

function
handleSelection (divRef)
{

if(!divRef) divRef = document.getEle mentById("edit" );

// get titleText from user with prompt...

var toolTip = prompt("Enter tooltip text","tooltip" );

var selectionObj = divRef.document .selection;
var range = selectionObj.cr eateRange(); // or concatenate all into one statement

if(range.text.l ength)
range.pasteHTML ("<a title = '" + titleText + "'>" + range.text + "</a>";

divRef.onmouseu p = null; // this is set with activateMouseup ()
// so clear it

}

function
activateMouseup (dv)
{
dv.onmouseup = handleSelect;
}


<!-- html -->

<div id = userArea onselectstart = "activateMouseu p(this)" ondblclick = "handleSelectio n(this)">
user text will handle regular selection or double clicking on a word

the onselect event handler is not available for DIVs under IE (don't
know about nn7) so i use this little workaround.

</div>

<!-- end html -->

I elected to avoid onselectionchan ge event handler [pertains only to
entire document], but definitely another way to go.

as far as i can tell, contentEditable does not need to be used which is
desirable if you do not want the end user to change the content...


an option (recommended) would be to examine the htmlText property
(instead of text) of the range object if you need to filter through
previously provided html [e.g., pre-exiting links, formatting tags,
etc...]. When you pasteHTML using only the text property, if there *was*
a formatting tag within the selection, it will be gone after the html is
changed (pasted)...

personally, building these little tools for myself is fine -- i know
what the software is capable of and how to work carefully with it...
however, you can never trust a novice user to "behave" with this
technology and it is way too easy (and too powerful) to let an average
user play with this.

For example, suppose you have the following text:

The quick brown fox jumps over the lazy dog.

The user selects "quick brown fox " and supplies a tooltip ("wild
doglike animal"); then, decides a tooltip for "fox jumps over" could use
a tooltip -- all of a sudden, the html will look like:

<a title="tooltip for quick brown fox">quick brown <a title="tooltip for
fox jumps">fox </a> jumps over </a> the lazy dog.

This is incorrect html...and very difficult to sort through and fix
outside the context of the selection passed to handleSelection () even if
you do examine htmlText. You would be able to determine a closing tag
without an openning tag, but things can get very complicated sorting out
complicated html.

The ability to create online richtext editors is fraught with problems
like this. I would recommend that capabilities given to end users be
very restrictive (like text only via textareas and teach them a few
formatting tags like <strong><em>etc ...). I've written a very extensive
RTE and once I finished -- I wouldn't let anyone else, below "advanced"
proficiency, use it. It's a great and convenient back-end tool for
maintenance though, but it's much easier to use a high powered editor
capable of ftp to make on-site edits (like Crimson Editor) -- i don't
need wysiwyg.

Furthermore, consider the source: MS (FrontPage)...h tml written via
execCommand (with "bold", "italic" etc...) creates pretty crappy html
and the more edits made on a document, the worse it gets...and...
correct me if i'm wrong... but if you expect to be able to save document
changes on a website with execCommand("Sa veAs"), you will need an
expensive cert (unless you use an alternative serverside support like
PHP, or similar -- which is what i do).

good luck.



[color=blue]
> ------------------------------------------------------------
> Programming is like sex, one mistake and you have to support it for
> the rest of your life. (Michael Sinz)[/color]