In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > designMode (document)

designMode property (document)

Browser support:

Sets or returns a string value that indicates whether editing is enabled for the document.

If the design mode is enabled, the user can edit the entire contents of the document like in a WYSIWYG (What You See Is What You Get) editor. The designMode property is not supported by HTML elements, only the editable state of the entire document can be modified with it.

The contentEditable property is more useful, because it allows content editing for almost all HTML elements. The contentEditable property is supported by all commonly used browsers, but only from version 3 in Firefox. In earlier Firefox versions, the only way to insert editable content into your HTML page is to use an iframe element with designMode = 'on'.

Syntax:

object.designMode;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

String that sets or retrieves the editing mode.

One of the following values:

Inherit

Document is not editable. Use the cross-browser 'off' value instead.

Document is editable.

off

Document is not editable.

Default: off.

Example HTML code 1:

This example shows how to enable content editing with designMode property:

Code

editable.htm

<head>
    <script type="text/javascript">
        var editorDoc;
        function InitEditable () {
            var editor = document.getElementById ("editor");
            editorDoc = editor.contentWindow.document;          
            var editorBody = editorDoc.body;

                // turn off spellcheck
            if ('spellcheck' in editorBody) {    // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                    // allow contentEditable
                editorBody.contentEditable = true;
            }
            else {  // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

        function ToggleBold () {
            editorDoc.execCommand ('bold', false, null);
        }
    </script>
</head>
<body onload="InitEditable ();">
    First, write and select some text in the editor.
    <br />
    <iframe id="editor" src="editable.htm"></iframe>
    <br /><br />
    You can toggle the bold/normal state of the selected text with this button:
    <br />
    <button onclick="ToggleBold ();">Bold</button>
</body>

<!DOCTYPE html>
<html>
<head>
    <title>Editable content example</title>
    <meta charset="utf-8" />
</head>
<body>
    Some text in the editor.
</body>
</html>