Question

在内容可编辑的div上执行execCommand时，是否存在保持按钮处于活动状态的内置方式？

示例：

<input type="button" onclick="doRichEditCommand('bold');" value="B"/>

function doRichEditCommand(command){
    document.execCommand(command, null, false);
}

当卡雷尔处于已应用document.execCommand(command, null, false);的位置时，我希望我的按钮保持活动状态。我认为通过检查父元素是可行的，但如果有内置方式则会更好。

换句话说，当卡雷尔应该是粗体的时候，我喜欢我的粗体按钮是橙色。

Answer 1

它可行，但它真的很烦人。

每当有意义的更改时，您调用document.queryCommandState()来查找插入符号所在文本的状态，然后更新按钮类以匹配。如下所示：

let div = document.getElementById("myContentEditable");
div.oninput = () => {
  if (document.queryCommandState('bold')) {
    console.log("bold!");
  } else {
    console.log("not bold.");
  }
  return false;
};

从那里，您可以应用或删除粗体按钮中的样式，以指示光标是否以粗体显示。重复其他样式。

令人讨厌的部分是你需要在几个不同的事件上更新按钮状态。这对我来说似乎相当详尽：

div.oninput = div.onselect = div.onchange = div.onkeyup = eventhandler;

......但我可能错了。

Answer 2

<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>

editable.html：

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

这里有一些可能的解决方案：execCommand method examples

Answer 3

这是我实现的目标：

JS

function format(command) {
    document.execCommand(command, false);
    const button = document.getElementById(command);
    button.classList.toggle("button--active");
 }

HTML

<button id="bold" onclick="format(this.id)">Bold</button>

SCSS

button {
    //Whatever you want
    &--active {
            //Whatever you want
    }
}

但是，它适用于常规写作。如果选择文本并应用效果，则该按钮将保持活动状态。

将类应用于contentEditable div上的execCommand按钮

3 个答案: