Javascript 以编程方式插入文本节点后，插入符号在contenteditable body标记中不再可见

我正在Windows10Pro机器上使用Mozilla Firefox（83.0）

启用contenteditable属性的简单body标记后，插入文本节点时插入符号将消失。我在Chrome 87.0.4280.88版上做了完全相同的测试，但它没有这样做

这是一个演示。你也可以在这里找到小提琴

setTimeout（函数（）{
让range=document.getSelection（）.getRangeAt（0）；
让element=document.createElement（'span'）；
range.insertNode（元素）；
}, 10000);

这是一个测试
我能够以一种对未选中和选中文本都有效的方式解决这个问题

注意：我所做的更改是克隆该范围，然后在克隆后重新应用该特定范围。在Firefox中，这似乎是必需的，但在Chrome中则不是。（有关版本详细信息，请参阅OP）


setTimeout（函数（）{
让range=document.getSelection（）.getRangeAt（0）；
设clonedRange=range.cloneRange（）；
让element=document.createElement（'span'）；
range.insertNode（元素）；
让selection=document.getSelection（）；
selection.removeAllRanges（）；
选择。添加范围（克隆范围）；
}, 10000);

这是一个测试
所有ContentEditable API实现都有自己的怪癖，这似乎是Firefox中的怪癖之一。但你真正的问题是什么？可能您想在插入空元素后在某个地方显示插入符号，但具体在哪里？我已经更新了我的问题，以说明我希望它做什么。看起来您需要添加
range.collapse（）。如果确实要向新元素添加文本，可以将
true
传递到
。collapse
将光标放在新元素的开头，省略参数或将其设置为
false
将光标移动到新元素的结尾。@Teemu虽然我没有提到它，但理想情况下，文本选择将保持选中状态，我不认为崩溃会在那个特定的情况下起作用。事实上，如果我们不加选择地特别关注我提到的工作流，那么这将解决问题。“虽然我没有提到……”好吧，你没有提到，但我想不会有更好的建议，就是这样。对于你将来的问题，请在介绍问题时保持当前行（太好了！），但也要经常问一个实际的问题，详细解释你需要什么，这样你就不必自己找到最终的解决方案，其他用户也不必猜测你的问题。