Rich Text Editor - problem with generated HTML

Discussion in 'Javascript' started by pbreah, Jul 11, 2006.

  1. pbreah

    pbreah Guest

    I'm doing a Rich Text Editor (WYSIWYG) in javascript for a game for
    kids. I'm doing a special case in with every keystroke from A-Z creates
    a background and foreground color for that letter, witch is the same.
    The problem is editing doesn't work that well.

    For example when I type: ABCDFG , I get this code generated and
    displayed by the Rich Text Editor:

    <P><FONT style="BACKGROUND-COLOR: #ffff00" color=#ffff00>a<FONT
    style="BACKGROUND-COLOR: #3399cc" color=#3399cc>b<FONT
    style="BACKGROUND-COLOR: #ffccff" color=#ffccff>c<FONT
    style="BACKGROUND-COLOR: #cccccc" color=#cccccc>d<FONT
    style="BACKGROUND-COLOR: #ffcc99" color=#ffcc99>f<FONT
    style="BACKGROUND-COLOR: #d21894"
    color=#d21894>g</FONT></FONT></FONT></FONT></FONT></FONT></P>

    The markup looks ugly but it works.

    If I put my cursor between the "D" and "F", for example, and try to
    insert the letter "E" I get this code:

    <P><FONT style="BACKGROUND-COLOR: #ff9900"
    color=#ff9900>abcdefg</FONT></P>

    I just want the letter "E" inserted in its own tag without overwriting
    the other letters. The whole line ends with the color of "E". :-(

    By the way, I'm using execCommand wih IE6 sp2. If you think or know a
    better way of solving this without execCommand or anything, please help
    :~(

    Any ideas, suggestions, code samples?

    Thank you...
     
    pbreah, Jul 11, 2006
    #1
    1. Advertisements

  2. pbreah

    bobzimuta Guest

    Welcome to the world of wysiwyg editing. I'm currently working on an
    editor for a social networking site, and have found that the code
    generated is usually not pretty. How does your logic work when you
    press a key? I'm guessing that it's something like
    on key down
    1. get the letter from the keycode
    2. execCommand to set corresponding fore / back color for that
    letter.

    Instead of on keydown, maybe on keypress, get all the text nodes from
    the editor document, and if they don't have a parent node of font (or
    span, whatever you want), assign a parent node with the color you want.

    Something like (mix of pseudo and javascript)
    on keypress
    nodes = editor.document.childNodes;
    foreach in nodes as i
    if nodes[ i ] != text node
    continue;
    color = possible_colors[ nodes[ i ].lowerCase ];
    span_tag = new span tag;
    span_tag.color = color;
    span_tag.appendChild( nodes[ i ].cloneNode( false ) )
    editor.document.replaceChild( span_tag, nodes[ i ] )
     
    bobzimuta, Jul 11, 2006
    #2
    1. Advertisements

  3. pbreah

    bobzimuta Guest

    I realized this approach won't work, since your text is likely to be
    inside of various tags. Therefore iterating through document.childNodes
    won't work. It'd have to be a recursive function to catch all the text
    nodes. Sorry

     
    bobzimuta, Jul 12, 2006
    #3
  4. pbreah

    pbreah Guest

    I use an on keypress event function. It calls a forecolor and backcolor
    function. Like so: (this is the code i'm working on). I'm trying to get
    it to work...

    function kb_handler(evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode || evt.charCode;
    var key = String.fromCharCode(keyCode).toLowerCase();
    var rte = 'rte1';

    if(keyCode == 32)
    {
    dlgColorPalette(rte, 'hilitecolor', '');
    setColor("#000000");
    dlgColorPalette(rte, 'forecolor', '');
    setColor("#000000");
    }
    else
    {
    switch (key)
    {
    case 'a':
    dlgColorPalette(rte, 'hilitecolor', '');
    setColor("#ffff00");
    dlgColorPalette(rte, 'forecolor', '');
    setColor("#ffff00");
    break;
    // .... and so on for all letters...
    default:
    dlgColorPalette(rte, 'hilitecolor', '');
    setColor('#000000');
    dlgColorPalette(rte, 'forecolor', '');
    setColor('#ffffff');
    }
    }
    }

    function setColor(color) {
    var rte = currentRTE;
    var parentCommand = parent.command;

    if (document.all) {
    var sel = frames[rte].document.selection;
    if (parentCommand == "hilitecolor") parentCommand = "backcolor";
    if (sel != null) {
    var newRng = sel.createRange();
    newRng = rng;
    newRng.select();
    }
    }

    rteCommand(rte, parentCommand, color);
    showHideElement('cp' + rte, "hide");
    }

    function dlgColorPalette(rte, command) {
    setRange(rte);
    parent.command = command;
    currentRTE = rte;
    }

    function setRange(rte) {
    var oRTE;
    if (document.all) {
    oRTE = frames[rte];
    var selection = oRTE.document.selection;
    if (selection != null) rng = selection.createRange();
    } else {
    oRTE = document.getElementById(rte).contentWindow;
    var selection = oRTE.getSelection();
    rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
    }
    }

    function rteCommand(rte, command, option) {
    //function to perform command
    var oRTE;
    if (document.all) {
    oRTE = frames[rte];
    } else {
    oRTE = document.getElementById(rte).contentWindow;
    }

    try {
    oRTE.focus();
    oRTE.document.execCommand(command, false, option);
    oRTE.focus();
    } catch (e) {
    // alert(e);
    // setTimeout("rteCommand('" + rte + "', '" + command + "', '" +
    option + "');", 10);
    }
    }
     
    pbreah, Jul 12, 2006
    #4
  5. pbreah

    pbreah Guest

    Any more ideas...? please help...
     
    pbreah, Jul 12, 2006
    #5
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.