Enter your email address:


feedburner count

Refactory my WYSIWYG html editor



I'm currently rewritting my WYSIWYG html editor that I developed last year for my V-CMS (Viet Nam Content Management System) to support more browsers (Mozilla base, fire fox. Many things must rewrite to support mozilla DOM api, since the new Mozilla Rich Text Editing API have differed from Microsoft one, these are some note when porting app from IE to Mozilla:

  1. Using document.getElementById('element') instead of document.all.element. You must make sure that all your elements have a "id" attribute.
  2. You can't use directly the focus() method for IFrame on Mozilla the same as on IE:
    • In IE : iframe.focus()
    • In Mozilla : document.getElementById("iframe").contentWindow.focus()

  3. document.designMode should be in onLoad() event of body tag rather than in script section in head tag.
  4. You can access document object in IE like this iframe.document, but not the same in Mozilla , you must use document.getElementById("iframename").contentWindow.document
  5. Use Title= attribute to supply Tooltip in both IE and Mozilla.
  6. The command "createlink" does not support displaying a user interface. In order to do that, you can use this code fragment :
    var szURL = prompt("Enter the URL", "");
    .
    .
    .
    getDocument().execCommand('createlink',false,szURL);
  7. When using "formatblock" for execCommand , you can't use "Preformatted", "Normal", "Heading 1", "Heading 2", "Heading 3"... in Mozilla , look at this convertion table:

    Localized Version Equivalent
    Normal

    <P>

    Heading 1

    <H1>

    Heading 2

    <H2>


    Heading 3

    <H3>


    Heading 4

    <H4>


    Heading 5
    <H5>

    Heading 6
    <H6>

    Paragraph

    <P>




  8. The backcolor option to execCommand behaves differently on Mozilla than on IE. Use hilitecolor in Mozilla instead of backcolor. This change take me a lot of time to figure out.

  9. Switching between Design and Source mode :
    • From Source to Design :
      • In IE :
        iText = getDocument().body.innerText;
        getDocument().body.innerHTML = iText;
      • In Mozilla :
        var html = getDocument().body.ownerDocument.createRange();
        html.selectNodeContents(getDocument().body);
        getDocument().body.innerHTML = html.toString();

    • From Design to Source :
      • In IE :
        iHTML = getDocument().body.innerHTML;
        getDocument().body.innerText = iHTML;
      • In Mozilla :
        var html = document.createTextNode(getDocument().body.innerHTML);
        getDocument().body.innerHTML = "";
        getDocument().body.appendChild(html);






blog comments powered by Disqus