The HTML5 standard has introduced a lot of new features to establish the basis for modern web. It has learned from the offerings of existing browsers and incorporated modern features. Web pages like blog postings and rich comment boxes require users to decorate their text to emphasis key points and this requires the ability to expose users to define their input in Html form. Internet Explorer 5 had introduced a couple of attributes to help with HTML editing – contenteditable and designMode. To provide the same features, the W3C has incorporated these attributes into HTML5. Mozilla 1.3 introduces an implementation of Internet Explorer's designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors. Starting in Firefox 3, Mozilla also supports Internet Explorer's contentEditable attribute which allows any element to become editable or non-editable.

The designMode sets the whole page as editable. Because this attribute makes the whole page editable, it is advised to use this within an iframe to contain the area which is editable.

    <iframe id="editRegion" srcdoc="source.html"></iframe>
    <script>
        function beginEdit() {
            var editArea = document.getElementById("editRegion");
            var document = (editArea.contentWindow || editArea.contentDocument).document;
            document.designMode = "on";
        }
        function endEdit() {
            var editArea = document.getElementById("editRegion");
	    var document = (editArea.contentWindow || editArea.contentDocument).document;
            document.designMode = "off";
        }
    </script>

Rich-text editing is initialized by setting the designMode property of a document to "on", such as the document inside an iframe. Once designMode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website. Another difference between Mozilla and IE is how to access the document object of an iframe, which is usually used in conjunction with designMode. Mozilla uses the W3C standard way, namely IFrameElement.contentDocument, while IE requires IFrameElement.document.

The contenteditable attribute can be specified in any element and when it is set to true, it makes the content of that element editable. When a page containing an element with contenteditable attribute set is loaded in a browser, and a user clicks on the element, a caret appears to help edit the contents.

      <div id="editArea" contenteditable="true">Edit Area</div>

It is not recommended to set contenteditable in the markup, Instead, one would set/unset it using JavaScript when the user takes a specific action.

When an HTML document has been switched to designMode, the document object exposes the document.execCommand method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link, image) or affect an entire line (indenting). When using contentEditable, calling execCommand will affect the currently active editable element.

    <script>
        
       // toggle italic text
       document.execCommand("italic", false, null);

    </script>

A major difference between Mozilla and Internet Explorer that affects designMode is the generated code in the editable document: while Internet Explorer uses HTML tags (em, i, etc), Mozilla will generate by default spans with inline style rules. The styleWithCSS command can be used to toggle between CSS and HTML markup creation. A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla) the events become active again.