mozilla

Compare Revisions

Rich-Text Editing in Mozilla

Change Revisions

Revision 5305:

Revision 5305 by Fumble on

Revision 5306:

Revision 5306 by Fumble on

Title:
Rich-Text Editing in Mozilla
Rich-Text Editing in Mozilla
Slug:
Rich-Text_Editing_in_Mozilla
Rich-Text_Editing_in_Mozilla
Tags:
NeedsTechnicalReview, NeedsMarkupWork, Midas, NeedsEditorialReview, Fixit, richtext
NeedsTechnicalReview, NeedsMarkupWork, Midas, NeedsEditorialReview, Fixit, richtext
Content:

Revision 5305
Revision 5306
n8      This document is currently being migrated from another siten8      <i><b>Please note:</b> This document is currently being mig
>. It is a work in progress and is not complete. --<a href="User:F>rated from another site. It is a work in progress and is not yet 
>umble">fumble</a> 17:45, 22 Apr 2005 (PDT)>complete.</i> --<a href="User:Fumble">fumble</a> 18:13, 24 Apr 20
 >05 (PDT)
n14      Mozilla 1.3 introduces an implementation of Micro$oft ® Intn14      Mozilla 1.3 introduces an implementation of Microsoft® Inte
>ernet Explorer's designMode feature. The rich-text editing suppor>rnet Explorer's designMode feature. The rich-text editing support
>t in Mozilla 1.3 supports the designMode feature which turns HTML> in Mozilla 1.3 supports the designMode feature which turns HTML 
> documents into rich-text editors.>documents into rich-text editors.
n20      Rich-text editing is initialized by setting the designMode n20      Rich-text editing is initialized by setting the <code>desig
>property of a document to "On", such as the document inside an if>nMode</code> property of a document to "On", such as the document
>rame. Once designMode has been set to "On", the document becomes > inside an iframe. Once <code>designMode</code> has been set to "
>a rich-text editing area and the user can type into it as if it w>On", the document becomes a rich-text editing area and the user c
>ere a textarea. The most basic keyboard commands such as copy and>an type into it as if it were a textarea. The most basic keyboard
> paste are available, all others need to be implemented by the we> commands such as copy and paste are available, all others need t
>bsite.>o be implemented by the website.
n26      When an HTML document has been switched to designMode, the n26      When an HTML document has been switched to designMode, the 
>document object exposes the execCommand method which allows one t>document object exposes the <code>execCommand</code> method which
>o run commands to manipulate the contents of the editable region.> allows one to run commands to manipulate the contents of the edi
> Most commands affect the document's selection (bold, italics, et>table region. Most commands affect the document's selection (bold
>c), while others insert new elements (adding a link) or affect an>, italics, etc), while others insert new elements (adding a link)
> entire line (indenting).> or affect an entire line (indenting).
n31    <blockquote>n31    <p>
n33    </blockquote>n33    </p>
n361    <hr>n361    <p>
362      Mozilla does not support Internet Explorer's <code>contentE
 >ditable</code> attribute which allows any element to become edita
 >ble. One major difference between Mozilla and Internet Explorer t
 >hat affects designMode is the generated code in the editable docu
 >ment: while Internet Explorer uses HTML tags (em, i, etc), Mozill
 >a 1.3 will generate by default spans with inline style rules. The
 > <code>useCSS</code> command can be used to toggle between CSS an
 >d HTML markup creation.
362    <p>363    </p>
363      Mozilla does not support Internet Explorer's <code>contentE364    <p>
>ditable</code> attribute which allows any element to become edita 
>ble. One major difference between Mozilla and Internet Explorer t 
>hat affects designMode is the generated code in the editable docu 
>ment: while Internet Explorer uses HTML tags (em, i, etc), Mozill 
>a 1.3 will generate by default spans with inline style rules. The 
> useCSS command can be used to toggle between CSSand HTML markup  
>creation. 
365      <b>Figure 1&nbsp;: Generated HTML differences</b>
n366Figure 1 : Generated HTML differencesn
367 
n378      Another difference between Mozilla and IE is how to access n378      Another difference between Mozilla and IE is how to access 
>the document object of an iframe, which is usually used in conjun>the document object of an iframe, which is usually used in conjun
>ction with designMode. Mozilla uses the W3C standard way, namely >ction with designMode. Mozilla uses the W3C standard way, namely 
><code>IFrameElement.contentDocument</code>, while IE requires <co><code>IFrameElement.<a class="external" href="http://www.w3.org/T
>de>IFrameElement.document</code>.>R/DOM-Level-2-HTML/html.html#ID-38538621">contentDocument</a></co
 >de>, while IE requires <code>IFrameElement.document</code>.
379    </p>
380    <p>379    </p>
380    <p>
381      DevEdge provides a JavaScript helper class, xbDesignMode, w381      <i><b>DevEdge</b></i> provides a JavaScript helper class, <
>hich is a wrapper for the designMode feature which hides the diff>code><a href="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode"
>erences between IE and Mozilla.>>xbDesignMode</a></code>, which is a wrapper for the designMode f
 >eature which hides the differences between IE and Mozilla.
nn386    <p>
387      <i><b>Please note:</b> The example files are still being mi
 >grated from another site. They are not available at this time.</i
 >> --<a href="User:Fumble">fumble</a> 18:13, 24 Apr 2005 (PDT)
388    </p>
n390      The first example is an HTML document setting its own design393      The first example is an HTML document setting its own <code
>nMode to "On". This makes the entire document editable in Mozilla>>designMode</code> to "On". This makes the entire document editab
> 1.3. Internet Explorer, however, does not allow javascript to ch>le in Mozilla 1.3. Internet Explorer, however, does not allow jav
>ange the current document's designMode. For it to work in Interne>ascript to change the current document's designMode. For it to wo
>t Explorer, the contentEditable attribute of the body tag needs t>rk in Internet Explorer, the <code>contentEditable</code> attribu
>o be set to "true". The example can be found here.>te of the body tag needs to be set to "true". The example can be 
 >found <a href="en/Example1.html">here</a>.
394    </p>
395    <p>
396      <br>
397      <b>Figure 2&nbsp;: First example - <a href="en/Example1.htm
 >l">View Example</a></b>
n393Figure 2 : First example - View Examplen
394 
n407      <i>Still working on it! More content coming soon...</i>n412      The second example is a simple rich text editing page, wher
 >e text can be bolded/italicized/underlined, new links can be adde
 >d and the color of text changed. The example page consists of an 
 >iframe, which will be the rich editing area, as well as elements 
 >for basic editing commands such as bold/italics/text color. Also 
 >provided is a "view source" button that will display the generate
 >d code in the iframe's document. The example can be found <a href
 >="en/Example2-index.html">here</a>.
408    </p>
409    <p>413    </p>
410      <br>
411    </p>414    <p>
415      &lt;iframe src="example2-index.html" height="260" width="10
 >0%"&gt;&lt;/iframe&gt;
416    </p>
417    <p>
418      <b>Figure 3&nbsp;: Setting up rich-text editing</b>
419    </p>
420    <pre>
421HTML:
422&lt;body onload="load()"&gt;
423 
424JavaScript:
425function load(){
426  getIFrameDocument("editorWindow").designMode = "On";
427}
428 
429function getIFrameDocument(aID){
430  // if contentDocument exists, W3C compliant (Mozilla)
431  if (document.getElementById(aID).contentDocument){
432    return document.getElementById(aID).contentDocument;
433  } else {
434    // IE
435    return document.frames[aID].document;
436  }
437}
438</pre>
439    <p>
440      The example contains a <code>doRichEditCommand</code> funct
 >ion that makes it easier to execute commands on the iframe's docu
 >ment and keeps the HTML code clean. The function executed the req
 >uested command using <code>execCommand()</code> and then sets foc
 >us back to the editable document, as clicking on a button will se
 >t focus on the button itself, which breaks the editing flow.
441    </p>
442    <p>
443      <b>Figure 4&nbsp;: Executing Rich Editing Commands</b>
444    </p>
445    <pre>
446HTML:
447&lt;button onclick="doRichEditCommand('bold')" style="font-weight
 >:bold;"&gt;B&lt;/button&gt;
448 
449JavaScript:
450function doRichEditCommand(aName, aArg){
451  getIFrameDocument('editorWindow').execCommand(aName,false, aArg
 >);
452  document.getElementById('editorWindow').contentWindow.focus()
453}
454</pre>
455    <h3 name="Resources">
456      Resources
457    </h3>
458    <ul>
459      <li>
460        <a class="external" href="http://mozilla.org/editor/midas
 >-spec.html">mozilla.org's rich-text editing Specification</a>
461      </li>
462      <li>
463        <a class="external" href="http://mozilla.org/editor/midas
 >demo/">mozilla.org's rich-text editing Demo</a>
464      </li>
465      <li>
466        <a class="external" href="http://www.mozilla.org/editor/i
 >e2midas.html">Converting an app using document.designMode from IE
 > to Mozilla at mozilla.org</a>
467      </li>
468      <li>
469        <a class="external" href="http://msdn.microsoft.com/works
 >hop/author/dhtml/reference/properties/designmode.asp">MSDN Docume
 >ntation on designMode</a>
470      </li>
471      <li>
472        <a class="external" href="http://msdn.microsoft.com/downl
 >oads/samples/internet/default.asp?url=/downloads/samples/internet
 >/ie55/EditRegions/default.asp">MSDN Demo</a>
473      </li>
474      <li>
475        <a class="external" href="http://www.kevinroth.com/rte/de
 >mo.htm">A open source, cross-browser rich-text editing demo</a>
476      </li>
477      <li>
478        <a href="en/Rich-Text_Editing_in_Mozilla/Class_xbDesignMo
 >de">xbDesignMode; a JavaScript helper class for easier cross-brow
 >ser development using designMode.</a>
479      </li>
480    </ul>
481    <h3 name="Bugs">
482      Bugs
483    </h3>
484    <p>
485      <a class="external" href="http://bugzilla.mozilla.org/show_
 >bug.cgi?id=209836">Bug 209836 - designMode still active after cli
 >cking Back.</a>
486    </p>
487    <blockquote>
488      Problem
489      <dl>
490        <dd>
491          <dl>
492            <dd>
493              Once <code>document.designMode</code> has been set 
 >for the <code>document</code> object in a window, all documents i
 >n that window for that domain will remain editable.
494            </dd>
495          </dl>
496        </dd>
497      </dl>
498    </blockquote>
499    <blockquote>
500      Solution
501      <dl>
502        <dd>
503          <dl>
504            <dd>
505              Edit the document in a separate window or contained
 > in an IFRAME.
506            </dd>
507          </dl>
508        </dd>
509      </dl>
510    </blockquote>
n417        <li>Authors: Doron Rosenberg, Netscape Communicationsn516        <li>Author(s): Doron Rosenberg, Netscape Communications
n419        <li>Published 04 Apr 2003 (Feedback)n518        <li>Published: 04 Apr 2003
t421        <li>Revised 01 Jul 2003t520        <li>Revised: 01 Jul 2003
521        </li>
522        <li>Revised: 24 Apr 2005, <a href="User:Fumble">Joel Core
 >son</a>

Back to History