Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > appendix > javascript > command identifiers

Commands

Command identifiers can be used for the following methods to perform an action on an element:
Methods Support Description
execCommand
(document, TextRange, ...)
Allows running commands on certain objects.
queryCommandEnabled
(document, TextRange, ...)
Returns whether the execution of the specified command can be successful, using the execCommand method.
queryCommandIndeterm
(document, TextRange, ...)
Returns whether the specified command is in an indeterminate state.
queryCommandState
(document, TextRange, ...)
Returns the current state of the specified command.
queryCommandSupported
(document, TextRange, ...)
Returns whether the specified command is supported by the current object.
queryCommandText
(document, TextRange, ...)
Returns the description of the specified command.
queryCommandValue
(document, TextRange, ...)
Returns the actual value of the specified command.

List of available commands:

Command Support Description Value
2D-Position
Enables or disables moving absolute and relative positioned elements by dragging.

See Example 2. 		Boolean that indicates whether the move of positioned elements are allowed.
backColor
Sets the background color of the current selection in Internet Explorer, Google Chrome and Safari and the background color of the editable region that contains the selection (or the caret) in Firefox and Opera. To change the background color of the selection in Firefox and Opera, use the hiliteColor command. String that specifies the color.
bold
Toggles the bold state of the current selection. It uses the strong element in Internet Explorer and the b element in other browsers to make text bold.

See Example 1. 		Omitted.
clearAuthenticationCache
Deletes all authentication credentials from the browser's cache. Omitted.
contentReadOnly
Makes the document editable or read-only. Boolean.
copy
5
 Copies the current selection to the clipboard. The UniversalXPConnect privilege is required for this command in Firefox. Omitted.
createBookmark
Inserts the current selection into a named anchor element (bookmark), or returns the name of a bookmark anchor for the current selection. String that specifies the name of the anchor.
createLink
Inserts the current selection into an anchor element and specifies the href property of the anchor. String that specifies the URL of the anchor. Required in Firefox, Opera, Google Chrome and Safari, and optional in Internet Explorer. If no value is specified, this command displays a dialog box for the URL in Internet Explorer.
cut
5
 Cuts the current selection from the document and copies it to the clipboard. The UniversalXPConnect privilege is required for this command in Firefox. Omitted.
decreaseFontSize
Inserts the current selection into a small element. Omitted.
delete
Deletes the current selection from the document.

See Example 1. 		Omitted.
enableInlineTableEditing
Specifies whether inserting and deleting table rows and columns are allowed. Boolean.
enableObjectResizing
Specifies whether resizing objects is allowed. Boolean.
fontName
Specifies a font family name for the current selection. String that specifies the font name.
fontSize
Specifies a font size for the current selection. Integer between 1 and 7.
foreColor
Specifies a font color for the current selection.

See Example 1. 		String that specifies the color.
formatBlock
Inserts the current selection into a block element. String that specifies the name of the element. In Internet Explorer, the name of the element must be placed between tag delimiters (such as "<H1>"). Firefox, Opera, Google Chrome and Safari support all block elements, Internet Explorer supports only the h1 - h6, address and pre elements.
heading
Inserts the current selection into the specified heading element (h1 - h6). String that specifies the name of the element.
hiliteColor
Sets the background color of the current selection. In Internet Explorer, use the BackColor command instead. String that specifies the color.
increaseFontSize
Inserts the current selection into a big element. Omitted.
indent
Indents the block element where the current selection is located. Omitted.
insertBrOnReturn
Specifies whether the Enter key inserts a br element. Boolean.
insertButton
Replaces the current selection with a button element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertFieldset
Replaces the current selection with a fieldset element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertHorizontalRule
Inserts a horizontal rule element in place of the current selection or at the carret position. In Internet Explorer, if no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertHTML
Inserts an HTML formatted content in place of the current selection or at the carret position. String that specifies the HTML formatted content.
insertIFrame
Replaces the current selection with an iframe element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertImage
Inserts an img element in place of the current selection or at the carret position. In Internet Explorer, if no content is selected, this command has no effect. String that specifies the src property of the newly added element or null.
insertInputButton
Replaces the current selection with an input:button element. String that specifies the id property of the newly added element or null.
insertInputCheckbox
Replaces the current selection with a input:checkbox element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputFileUpload
Replaces the current selection with a input:file element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputHidden
Replaces the current selection with an input:hidden element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputImage
Replaces the current selection with an input:image element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputPassword
Replaces the current selection with an input:password element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputRadio
Replaces the current selection with an input:radio element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputReset
Replaces the current selection with an input:reset element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputSubmit
Replaces the current selection with an input:search element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertInputText
Replaces the current selection with an input:text element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertMarquee
Replaces the current selection with a marquee element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertOrderedList
Creates or removes an ordered list based on the current selection or carret position. In Internet Explorer, if no content is selected, this command has no effect. Omitted.
insertParagraph
Inserts a p element in place of the current selection or at the carret position. In Internet Explorer, if no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertSelectDropdown
Replaces the current selection with a drop-down select element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertSelectListbox
Replaces the current selection with an listbox select element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertTextArea
Replaces the current selection with a textarea element. If no content is selected, this command has no effect. String that specifies the id property of the newly added element or null.
insertUnorderedList
Creates or removes an unordered list based on the current selection or carret position. In Internet Explorer, if no content is selected, this command has no effect. Omitted.
italic
Toggles the italic state of the current selection. It uses the em element in Internet Explorer and the i element in other browsers to make text italic.

See Example 1. 		Omitted.
justifyCenter
Centers the text content of the block element where the current selection is located. Omitted.
justifyFull
Justifies the text content of the block element where the current selection is located. Omitted.
justifyLeft
Aligns the text content of the block element where the current selection is located to the left. Omitted.
justifyRight
Aligns the text content of the block element where the current selection is located to the right. Omitted.
liveResize
Enables or disables whether the appearance of an element should be updated continuously during a resizing or moving operation. Boolean that indicates whether the appearance of an element should be updated continuously.
multipleSelection
Enables or disables multiple selection for a select element.

See Example 3. 		Boolean that indicates whether multiple selection is allowed.
outdent
Outdents the block element where the current selection is located. Omitted.
overWrite
Toggles the text-entry mode between insert and overwrite. Boolean. If true, the text-entry is in overwrite mode.
paste
Inserts the contents of the clipboard in place of the current selection or at the carret position. The UniversalXPConnect privilege is required for this command in Firefox. Omitted.
print
Opens the print dialog. Omitted.
redo
Redoes the previous undo action. Omitted.
refresh
Refreshes the contents of the current document. Omitted.
removeFormat
Removes all formatting from the current selection. Omitted.
saveAs
Opens the Save As dialog box so the user can save the current document to a file. String that specifies the path and the name of the file to save, or null.
selectAll
Selects all contents within the editable region. Omitted.
strikeThrough
Toggles the current selection between strike through and normal. It uses the s element to make text strike through. Omitted.
styleWithCSS
Specifies whether CSS or HTML formatting should be generated by the execCommand method into the document. Boolean. If true, the execCommand method generates CSS formatting.
subscript
Toggles the current selection between subscript and normal type. It uses the sub element to make text subscript. Omitted.
superscript
Toggles the current selection between superscript and normal type. It uses the sup element to make text superscript. Omitted.
underline
Toggles the current selection between underlined and normal. It uses the u element to make text underlined. Omitted.
undo
Undoes the previous action. Omitted.
unlink
Removes the anchor link from the current selection. Omitted.
unselect
Clears the current selection. Omitted.
useCSS
Deprecated, use the styleWithCSS command instead. Specifies whether CSS or HTML formatting should be used for the generated content. Boolean.

Examples:

This example implements a simple WYSIWYG (What You See Is What You Get) editor:
Code
editable.htm 
<head>
    <script type="text/javascript">
        var editorDoc;
        function InitEditable () {
            var editor = document.getElementById ("editor");

            if (editor.contentDocument)
                editorDoc = editor.contentDocument;
            else
                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 before version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

        function ToggleBold () {
            editorDoc.execCommand ('bold', false, null);
        }
        function ToggleItalic () {
            editorDoc.execCommand ('italic', false, null);
        }
        function SetRed () {
            editorDoc.execCommand ('foreColor', false, "#ff0000");
        }
        function Delete () {
            editorDoc.execCommand ('delete', 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 use the following buttons to change the appearance of the selected text:
    <br /><br />
    <button onclick="ToggleBold ();">Bold</button>
    <button onclick="ToggleItalic ();">Italic</button>
    <button onclick="SetRed ();">Set to red</button>
    <button onclick="Delete ();">Delete</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no
This example shows how to use the '2D-position' command in Internet Explorer: 
<head>
    <script type="text/javascript">
            // the '2D-position' command throws an exception in Firefox
        try {
                // enables moving absolute and relative positioned elements by dragging
            document.execCommand ("2D-position", false, true);
        }
        catch (e) {};
        
        function UpdateCoords (blueElem){
            var posX = document.getElementById ("posX");
            var posY = document.getElementById ("posY");
            posX.innerText = blueElem.offsetLeft;
            posY.innerText = blueElem.offsetTop;
        }
    </script>
</head>
<body>
    Move the blue element with your mouse!
    <div contenteditable="true" style="border:1px solid #000000; height:200px;">
        <div onmove="UpdateCoords (this)" style="width:200px;height:80px; background-color:blue; position:absolute;">
        </div>
    </div>
    <br /><br />
    The position of the blue element relative to the top-left corner of the document:<br />
    X pos: <span style="color:red" id="posX"></span><br/>
    Y pos: <span style="color:red" id="posY"></span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no
This example shows how to use the 'multipleSelection' command in Internet Explorer: 
<head>
    <script type="text/javascript">
        function Init () {
                // the 'multipleSelection' command throws an exception in Opera
            try {
                    // enables multiple selection in Internet Explorer
                document.execCommand("multipleSelection", false, true);
            }
            catch (e) {};
        }

        function SelectButtons () {
            var editor = document.getElementById ("editor");
            if (editor.createControlRange) {        //Internet Explorer
                var buttons = editor.getElementsByTagName ("button");

                var controlRange = editor.createControlRange ();
                for (var i = 0; i < buttons.length; i++) {
                    controlRange.add (buttons[i]);
                }

                controlRange.select ();
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="editor" contenteditable="true" style="background-color:#e0f0e0;">
        <button>Sample button</button>
        <br /><br />Sample text inside the editor.<br /><br />
        <button>Another button</button>
    </div>
    <br /><br />Click on the button below to select all buttons with the controlRange collection.<br /><br />
    <button onclick="SelectButtons ();">Select all buttons inside the editor!</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

External links:

Executing Commands (Mozilla)
Command Identifiers (MSDN)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix