Javascript 设置内容可编辑段落中粗体元素内的插入符号（光标）

我一直在尝试构建一个基于web的文本编辑器。作为这个过程的一部分，我尝试动态地创建和修改基于元素和击键事件的字体编辑。在这个特定的例子中，我试图在按下CTRL+b键并在强元素内设置焦点/插入符号时创建一个强元素，以便后续输入的文本将是粗体元素的一部分，因此将具有粗体文本。但是我的代码只是创建了一个强元素，但没有转移焦点，因此没有文本变得更粗体

在下面的代码中，我将创建事件侦听器来捕获击键事件

p=document.getElementsByTagName("p")[0];

//console.log(p)

// adding eventlistener for keydown
p.addEventListener("keydown",listener);

// eventlistenerr callback function
function listener(){
  e=window.event;
  if(e.ctrlKey && e.keyCode==66)
    {
      console.log("CTRL+B");

      // creating bold element
      belm=document.createElement("strong");
      belm.setAttribute("contenteditable","true")
      p.appendChild(belm);

      //bug below
      // setting focus inside bold element
      setfocus(belm,0);
      e.preventDefault();
    }
}

以下是设置焦点的功能

function setfocus(context, position){
    var range = document.createRange();
    position =position || 0;
    var sel = window.getSelection();
    range.setStart(context, position);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    context.focus();
}

然而，我毫不怀疑设置焦点的功能是错误的，因为在小提琴中，如果你观察的话，我创建了一个单独的设置来测试这一点

---

出来单击“单击此处”按钮，焦点将动态地转移到段落元素，而无需任何麻烦。我不知道出了什么问题。

几乎不可能将光标移动到contenteditable div中的空元素中。但是，正如另一篇文章所建议的，您可以将零宽度字符

ÈB

插入空元素中，以给它一个索引值

下面是一个例子*：

函数插入节点（nodeName）{
var sel=window.getSelection（），
范围
范围=选择范围（0）；
range.deleteContents（）；
var child=document.createElement（节点名）；
child.innerHTML='​；'；
range.insertNode（子节点）；
}
var div=document.querySelector（'div'），
btn=document.querySelector（'button'）；
btn.addEventListener（'click'，function（）{
insertNode（'strong'）；
分区焦点（）；
});
分区焦点（）
B