Custom Tags with execCommand

Discussion in 'Javascript' started by E J, Dec 10, 2003.

  1. E J

    E J Guest

    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'>Selected Text</a>".

    Any ideas?
    ------------------------------------------------------------
    Programming is like sex, one mistake and you have to support it for
    the rest of your life. (Michael Sinz)
     
    E J, Dec 10, 2003
    #1
    1. Advertising

  2. E J

    Fox Guest

    E J wrote:
    >
    > 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'>Selected Text</a>".
    >
    > Any ideas?


    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.getElementById("edit");

    // get titleText from user with prompt...

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

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

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

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

    }

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


    <!-- html -->

    <div id = userArea onselectstart = "activateMouseup(this)" ondblclick = "handleSelection(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 onselectionchange 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)...html 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("SaveAs"), you will need an
    expensive cert (unless you use an alternative serverside support like
    PHP, or similar -- which is what i do).

    good luck.




    > ------------------------------------------------------------
    > Programming is like sex, one mistake and you have to support it for
    > the rest of your life. (Michael Sinz)
     
    Fox, Dec 10, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Ranganath

    Custom Tags within Custom Tags.

    Ranganath, Oct 17, 2003, in forum: Java
    Replies:
    2
    Views:
    470
    Ranganath
    Oct 21, 2003
  2. Mike
    Replies:
    3
    Views:
    889
    Michael Borgwardt
    Jan 9, 2004
  3. A. Brinkmann
    Replies:
    2
    Views:
    1,090
    A. Brinkmann
    Apr 16, 2004
  4. koslows
    Replies:
    0
    Views:
    537
    koslows
    May 12, 2005
  5. Dave
    Replies:
    0
    Views:
    456
Loading...

Share This Page