execCommand bold 不要在 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.

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

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

以下Demo有：

1. 一个 onclick Event Attribute 切换 “粗体” 命令。
2. 注册到“双击 (dblclick)”事件的 EventListener。它切换 “斜体” 命令。
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>