execCommand粗体不要在firefox

Question

在FireFox中，我可以将选择设置为粗体，但是当我再点击一次时，所选的粗体文字不会解开...

如何解决这个问题？

正常（不工作）：

document.execCommand("bold", false, null); 
/
document.execCommand("bold", false, "");

我的尝试（也不工作）：

if (document.queryCommandState("bold")) {
        document.execCommand("insertHTML", false, ""+ document.getSelection()+"");
    } else {

    document.execCommand("insertHTML", false, "<b>"+ document.getSelection()+"</b>");

    }

Answer 1

在Chrome和Firefox上测试并通过

execComand('bold'... Toggles the style on and off of a selected part of text。

因此，要触发切换，请在为“切换”类型的事件注册的事件处理程序的回调函数中使用execCommand()，例如： click，dblclick，mousedown/up等。

execCommand()是一个多功能但专业的文档扩展，因为大多数命令（方法？）依赖于所选文本，点击事件，按键等。基本上，execCommand()是一个文本编辑器，因此在使用它时，请记住，界面与涉及文本格式和编辑的方面有很强的关联。

以下演示有：

1. onclick Event Attribute切换“粗体”命令。
2. EventListener注册了“双击（dblclick）”事件。它切换“italic”命令。
3. onmousedown Property Event Handler切换“下划线”命令。

演示

// double-click EventListener 
document.getElementById('I').addEventListener('dblclick', function(e) {
  document.execCommand('italic', false, null);
});

// mousedown Property Event Handler
document.getElementById('U').onmousedown = function(e) {
  document.execCommand('underline', false, null);
};

#editor1 {
  height: 100px;
  border: 3px inset grey
}

<div id="editor1" contenteditable="true">
  The quick brown fox jumped over the lazy dog.
</div>

<fieldset>

  <button id='I' class="fontStyle" title="Italicize Highlighted Text"><i>I</i>
    </button>

  <!-- click on Event Attribute -->
  <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>

  <button id="U" class="fontStyle" title="Underline Highlighted Text"><u>U</u>
    </button>

</fieldset>