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

我正在尝试这样做，以便我可以编辑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
   }
}

到目前为止，我已经获得了父节点。但是我正在努力用新代码替换父节点中的内容，包括标记。我还需要它来考虑其他文本可能已经是大胆的，单词可能会重复，所以我需要它使精确突出的选项大胆。 还可以将其反转以从所选文本中删除粗体

---

我怎样才能继续呢？

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

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

---

这几乎适用于所有浏览器。其他命令和完整文档可以在这里找到：

是的，我见过这个方法，但我想说，如果我有斜体、粗体和下划线，它们可能会落入一个标记中，那么就这样做吧，因为我希望创建一个HTML编辑器，并允许它们添加自定义类，如果它们也需要的话。因此，如果可能的话，我希望能够获取偏移量，删除标记以找到偏移量，添加标记并将其他标记放回（如果可能）：/或类似的内容。如果您希望合并标记以减少HTML，那么这将很困难。如果您只是想使用样式或类来处理其他事情，那么可以使用常规编辑器命令，然后更新每个命令以添加CSS/类。以这个答案为例：