在可编辑的iframe中，在浏览器中选择的位置的正确位置切换文本粗体

Question

我正在尝试制作它，以便我可以编辑iframe并能够将所选文本设置为粗体。正如您在下面的文字中看到的那样。

现在，我将解释我是如何陷入困境的，首先这里是一些代码：

var sel = $iFrame.get(0).contentWindow.getSelection();
if (sel.rangeCount) {
   var text = sel.toString();
   var range = sel.getRangeAt(0);
   var parent = range.commonAncestorContainer;
   if (parent.nodeType != 1) {
      parent = parent.parentNode;
   }

   if (range.startOffset > 0) {
     // change at offset
   } else {
     // change at beginning
   }
}

到目前为止，我已经获得了父节点。但我正在努力解决如何用新代码替换父节点内的内容，包括 标记。我还需要考虑其他文本可能已经是粗体，并且可能会重复单词，所以我需要它来使精确突出显示的选项变为粗体。

也可以将其反转以从所选文本中删除粗体。

我该如何处理？

Answer 1

您不想自己插入标签;让浏览器使用内置命令执行此操作。只要用户在contenteditable文档中选择了文本，只需运行此函数调用就会将其变为粗体：

document.execCommand('bold', false, null)

几乎适用于所有浏览器。其他命令和完整文档可在此处找到：https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand