execCommand method (document, TextRange, ...)

最新推荐文章于 2021-12-12 17:09:14 发布

dalaoshu321

最新推荐文章于 2021-12-12 17:09:14 发布

阅读量103

点赞数

分类专栏： javascript 文章标签： javascript php ViewUI

本文链接：https://blog.csdn.net/dalaoshu321/article/details/84389818

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

http://help.dottoro.com/ljcvtcaw.php

Allows running commands on certain objects.

The execCommand is one of the root methods of the rich-text editing feature of browsers.

The execCommand method works differently in different browsers, the commands are only executable for editable elements in Firefox, Google Chrome and Safari, while in Internet Explorer and Opera they can be used in editable and non-editable elements also.

An element can be made editable with the contentEditable property. If you want to make the entire document editable, use the designMode property or the contentEditable property for the body element. Note: Firefox only supports the contentEditable property from version 3.

The code generated by the execCommand method is different in browsers. Internet Explorer uses HTML tags, Firefox, Google Chrome and Safari generate inline styles and Opera sometimes uses HTML tags, sometimes styles.

For example, if the 'bold' command is executed on a non-bold text,

Internet Explorer and Opera generate a strong element around it,
Firefox, Google Chrome and Safari generate a span element around it and set the fontWeight style property of the span element to 'bold'. If an element exists around the non-bold text, then Firefox, Google Chrome and Safari set the fontWeight style property of this element to 'bold'.

If the 'bold' command is executed on a bold text, browsers remove the specified style property and/or the element including the text.

It can cause a problem if the execCommand method is executed on content that was previously generated by another browser. For example, in case of forums when the author tries to edit his/her post in a different browser than it was previously sent from. In that case, for example, if the 'bold' command is executed in Internet Explorer on a bold text that was previously created by the execCommand method in Firefox, then Internet Explorer cannot remove the bold style.

Example 4 shows a solution in Firefox, Opera, Google Chrome and Safari for changing the color of the selected text. Other text manipulation methods can be implemented similarly.

Use the queryCommandSupported method to detect whether a command is supported by the execCommand method. The use of a non-supported command for the execCommand method raises an exception.

Syntax:

object. execCommand (commandIdentifier, userInterface, value);

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

Parameters:

commandIdentifier

Required. A case-insensitive string that specifies the name of the command. See command identifiers for more information.

userInterface

Required in Firefox and Opera, optional in Internet Explorer, Google Chrome and Safari. Boolean that indicates whether a user interface needs to be displayed or not.

One of the following values:

false

Default. Does not display a user interface.

true

Displays a user interface, if any.

value

Required in Firefox and Opera, optional in Internet Explorer, Google Chrome and Safari. Specifies a parameter value for the command. The possible values depend on the command. Use null if no value is needed.

Return value:

Boolean. One of the following values:

false	There was an error while processing the command.
true	The command was successful.

Example HTML code 1:

This example illustrates the use of the execCommand method:

<head><scripttype="text/javascript">function SetToBold () {
            document.execCommand ('bold', false, null);
        }
    </script></head><body><divcontenteditable="true"onmouseup="SetToBold ();">Select a part of this text!</div></body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements the previous example so that it works in older browsers as well:

Code

editable.htm

<head><scripttype="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><bodyonload="InitEditable ();">
    First, write and select some text in the editor.
    <br/><iframeid="editor"src="editable.htm"></iframe><br/><br/>
    You can toggle the bold/normal state of the selected text with this button:
    <br/><buttononclick="ToggleBold ();">Bold</button></body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example implements a simple WYSIWYG (What You See Is What You Get) editor:

Code

editable.htm

<head><scripttype="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 earlier than 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><bodyonload="InitEditable ();">
    First, write and select some text in the editor.
    <br/><iframeid="editor"src="editable.htm"></iframe><br/><br/>
    You can use the following buttons to change the appearance of the selected text:
    <br/><br/><buttononclick="ToggleBold ();">Bold</button><buttononclick="ToggleItalic ();">Italic</button><buttononclick="SetRed ();">Set to red</button><buttononclick="Delete ();">Delete</button></body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This complex example modifies the color of the selected text in Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, similarly to the execCommand when it is invoked with the 'ForeColor' command. The example uses the selectionRange and Range objects to implements this functionality. The advantage of this solution is the browser-independently generated HTML code.

<head><scripttype="text/javascript">function GetNextLeaf (node) {
            while (!node.nextSibling) {
                node = node.parentNode;
                if (!node) {
                    return node;
                }
            }
            var leaf = node.nextSibling;
            while (leaf.firstChild) {
                leaf = leaf.firstChild;
            }
            return leaf;
        }

        function GetPreviousLeaf (node) {
            while (!node.previousSibling) {
                node = node.parentNode;
                if (!node) {
                    return node;
                }
            }
            var leaf = node.previousSibling;
            while (leaf.lastChild) {
                leaf = leaf.lastChild;
            }
            return leaf;
        }

            // If the text content of an element contains white-spaces only, then does not need to colorize
function IsTextVisible (text) {
            for (var i = 0; i < text.length; i++) {
                if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n')
                    returntrue;
            }
            returnfalse;
        }

        function ColorizeLeaf (node, color) {
            if (!IsTextVisible (node.textContent))
                return;
            
            var parentNode = node.parentNode;
                // if the node does not have siblings and the parent is a span element, then modify its color
if (!node.previousSibling && !node.nextSibling) {
                if (parentNode.tagName.toLowerCase () == "span") {
                    parentNode.style.color = color;
                    return;
                }
            }

                // Create a span element around the node
var span = document.createElement ("span");
            span.style.color = color;
            var nextSibling = node.nextSibling;
            parentNode.removeChild (node);
            span.appendChild (node);
            parentNode.insertBefore (span, nextSibling);
        }

        function ColorizeLeafFromTo (node, color, from, to) {
            var text = node.textContent;
            if (!IsTextVisible (text))
                return;
            
            if (from < 0)
                from = 0;
            if (to < 0)
                to = text.length;

            if (from == 0 && to >= text.length) {
                    // to avoid unnecessary span elements
                ColorizeLeaf (node, color);
                return;
            }

            var part1 = text.substring (0, from);
            var part2 = text.substring (from, to);
            var part3 = text.substring (to, text.length);

            var parentNode = node.parentNode;
            var nextSibling = node.nextSibling;

            parentNode.removeChild (node);
            if (part1.length > 0) {
                var textNode = document.createTextNode (part1);
                parentNode.insertBefore (textNode, nextSibling);
            }
            if (part2.length > 0) {
                var span = document.createElement ("span");
                span.style.color = color;
                var textNode = document.createTextNode (part2);
                span.appendChild (textNode);
                parentNode.insertBefore (span, nextSibling);
            }
            if (part3.length > 0) {
                var textNode = document.createTextNode (part3);
                parentNode.insertBefore (textNode, nextSibling);
            }
        }

        function ColorizeNode (node, color) {
            var childNode = node.firstChild;
            if (!childNode) {
                ColorizeLeaf (node, color);
                return;
            }

            while (childNode) {
                    // store the next sibling of the childNode, because colorizing modifies the DOM structure
var nextSibling = childNode.nextSibling;
                ColorizeNode (childNode, color);
                childNode = nextSibling;
            }
        }

        function ColorizeNodeFromTo (node, color, from, to) {
            var childNode = node.firstChild;
            if (!childNode) {
                ColorizeLeafFromTo (node, color, from, to);
                return;
            }

            for (var i = from; i < to; i++) {
                ColorizeNode (node.childNodes[i], color);
            }
        }

        function ColorizeSelection (color) {

            if (window.getSelection) {  // all browsers, except IE before version 9
var selectionRange = window.getSelection ();

                if (selectionRange.isCollapsed) {
                    alert ("Please select some content first!");
                }
                else {
                    var range = selectionRange.getRangeAt (0);
                        // store the start and end points of the current selection, because the selection will be removed
var startContainer = range.startContainer;
                    var startOffset = range.startOffset;
                    var endContainer = range.endContainer;
                    var endOffset = range.endOffset;
                        // because of Opera, we need to remove the selection before modifying the DOM hierarchy
                    selectionRange.removeAllRanges ();
                    
                    if (startContainer == endContainer) {
                        ColorizeNodeFromTo (startContainer, color, startOffset, endOffset);
                    }
                    else {
                        if (startContainer.firstChild) {
                            var startLeaf = startContainer.childNodes[startOffset];
                        }
                        else {
                            var startLeaf = GetNextLeaf (startContainer);
                            ColorizeLeafFromTo (startContainer, color, startOffset, -1);
                        }
                        
                        if (endContainer.firstChild) {
                            if (endOffset > 0) {
                                var endLeaf = endContainer.childNodes[endOffset - 1];
                            }
                            else {
                                var endLeaf = GetPreviousLeaf (endContainer);
                            }
                        }
                        else {
                            var endLeaf = GetPreviousLeaf (endContainer);
                            ColorizeLeafFromTo (endContainer, color, 0, endOffset);
                        }

                        while (startLeaf) {
                            var nextLeaf = GetNextLeaf (startLeaf);
                            ColorizeLeaf (startLeaf, color);
                            if (startLeaf == endLeaf) {
                                break;
                            }
                            startLeaf = nextLeaf;
                        }
                    }
                }
            }
            else {
                    // Internet Explorer before version 9
alert ("Your browser does not support this example!");
            }
        }
    </script></head><body>
    Select some content on this page and use the buttons below to colorize the selected text.<br/><br/><buttononclick="ColorizeSelection ('#FF0000');">Set color to red!</button><buttononclick="ColorizeSelection ('#0000FF');">Set color to blue!</button><br/><div>Some text for selection</div><div><b>Some bold text for selection.</b></div></body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

controlRange, document, TextRange, XMLDocument

contentEditable
designMode
queryCommandEnabled
queryCommandIndeterm
queryCommandState
queryCommandSupported
queryCommandText
queryCommandValue

External links:

execCommand (MSDN)
execCommand (Mozilla Developer Center)

dalaoshu321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
execCommand method (document, TextRange, ...)

http://help.dottoro.com/ljcvtcaw.php Allows running commands on certain objects.The execCommand is one of the root methods of the rich-text editing feature of browsers.The execCommand ...
复制链接

扫一扫