9

它有任何方法可以将 execcommand 与 div 元素绑定，而不是整个文档，我试试这个：

document.getElementById('div').execcommand(...)

但它有一个错误：

execcommand is not a function

它有任何方法可以将 execcommand 与 div 元素而不是整个文档绑定！我不喜欢使用 iframe 方法。

4

4 回答 4

20

这在 IE 中比其他浏览器更容易做到，因为 IE 的TextRange对象有一个execCommand()方法，这意味着可以在文档的一部分上执行命令，而无需更改选择并临时启用designMode（这是您在其他浏览器中必须做的）。这是一个干净地做你想做的事情的功能：

function execCommandOnElement(el, commandName, value) {
    if (typeof value == "undefined") {
        value = null;
    }

    if (typeof window.getSelection != "undefined") {
        // Non-IE case
        var sel = window.getSelection();

        // Save the current selection
        var savedRanges = [];
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            savedRanges[i] = sel.getRangeAt(i).cloneRange();
        }

        // Temporarily enable designMode so that
        // document.execCommand() will work
        document.designMode = "on";

        // Select the element's content
        sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);

        // Execute the command
        document.execCommand(commandName, false, value);

        // Disable designMode
        document.designMode = "off";

        // Restore the previous selection
        sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedRanges.length; i < len; ++i) {
            sel.addRange(savedRanges[i]);
        }
    } else if (typeof document.body.createTextRange != "undefined") {
        // IE case
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.execCommand(commandName, false, value);
    }
}

例子：

var testDiv = document.getElementById("test");
execCommandOnElement(testDiv, "Bold");
execCommandOnElement(testDiv, "ForeColor", "red");
于 2011-03-06T12:07:54.603 回答
4

也许这可以帮助你：

此页面上的示例代码 1通过使用函数对 div 执行命令。不确定这是否是你所追求的？祝你好运！

编辑：我想出了如何将代码放在这里：o

<head>
<script type="text/javascript">
    function SetToBold () {
        document.execCommand ('bold', false, null);
    }
</script>
</head>
<body>
      <div contenteditable="true" onmouseup="SetToBold ();">
       Select a part of this text!      
      </div>
</body>
于 2011-03-05T17:47:23.163 回答
3

Javascript：

var editableFocus = null;

  window.onload = function() {
    var editableElements = document.querySelectorAll("[contenteditable=true]");

    for (var i = 0; i<editableElements.length; i++) {
      editableElements[i].onfocus = function() {
        editableFocus = this.id;
      }
    };
  }

  function setPreviewFocus(obj){
    editableFocus = obj.id
  }

  function formatDoc(sCmd, sValue) {
    if(editableFocus == "textBox"){
      document.execCommand(sCmd, false, sValue); 
    }
  }

HTML：

<div id="textBox" contenteditable="true">
Texto fora do box
</div>

<div contenteditable="true">
Texto fora do box
</div>

<button title="Bold" onclick="formatDoc('bold');">Bold</button>
于 2015-04-02T03:58:05.363 回答
1

您可以保持简单，并将其添加到您的 div 中。

<div contenteditable="true" onmouseup="document.execCommand('bold',false,null);">
于 2018-02-10T19:32:12.960 回答