在内容可编辑段落中的粗体元素内设置插入符号(光标)

Question

我一直在尝试构建一个基于web的文本编辑器。作为这个过程的一部分，我尝试动态地创建和修改基于元素的事件和用于字体编辑的击键事件。在这个特殊的jsfiddle示例中，我试图在按下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();
}

然而，我毫不怀疑设置焦点的功能有问题，因为如果你观察到的话，我已经创建了一个单独的设置来测试这一点出来单击"单击此处"按钮，焦点会动态地转移到段落元素，而不会有任何麻烦。我不知道出了什么问题。

Answer 1

在可编辑内容的div中，几乎不可能将光标移动到一个空元素中。然而，正如shay levi在另一篇文章中建议的那样，您可以将零宽度字符&#200B插入到空元素中，为其提供索引值。

下面是一个例子*：

function insertNode(nodeName) {
var sel = window.getSelection(),
range;
range = sel.getRangeAt(0);
range.deleteContents();
var child = document.createElement(nodeName);
child.innerHTML = '​';
range.insertNode(child);
}
var div = document.querySelector('div'),
btn = document.querySelector('button');
btn.addEventListener('click', function() {
insertNode('strong');
div.focus();
});
div.focus();

<div contenteditable></div><button><strong>B</strong></button>

*为了简单起见，这个脚本不切换粗体文本，它只设置它