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

【问题标题】：Apply class to button which execCommand on contentEditable div将类应用于 contentEditable div 上的 execCommand 按钮
【发布时间】：2016-03-20 08:01:05
【问题描述】：

当按钮在内容可编辑的 div 上执行 execCommand 时，是否有一种内置方法可以保持按钮处于活动状态？

示例：

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

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

我希望我的按钮在 carret 位于已应用 document.execCommand(command, null, false); 的区域内时保持活动状态。我想通过检查父元素是可行的，但如果有内置的方法会更好。

换句话说，我希望我的粗体按钮是橙色的，而 carret 应该是粗体的。

【问题讨论】：

标签： javascript html wysiwyg contenteditable rich-text-editor

【解决方案1】：

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

每次 contenteditable 更改时，您调用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;

...但我可能是错的。

【讨论】：

【解决方案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>

可编辑的.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

【讨论】：

我不确定你是否理解我的问题，我希望我的粗体按钮在激活时变为橙色
感谢您尝试帮助我，但这不是我要问的。例如，如果您使用 word 或 gmail，当 carret 放置在文本为粗体的位置时，粗体按钮将处于活动状态（橙色）。我想知道是否有一个内置函数可以将按钮链接到 contentEditable 字段。我怀疑没有，但值得一试。

【解决方案3】：

这是我取得的成就：

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

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

【讨论】：