Javascript 允许移出contenteditable结尾处的范围

我正在尝试使用

contenteditable

编写一个基本的文本编辑器。在本MCVE中，它只有一个功能，即为选定文本提供红色高亮显示。†

我使用的代码如下：

函数createSpan（）{
让selection=document.getSelection（）；
让range=selection.getRangeAt（0）；
让元素=document.createElement（“span”）；
element.className=“内联公式”；
范围。周围内容（元素）；
设newRange=newRange（）；
新建范围。选择节点内容（元素）；
selection.removeAllRanges（）；
selection.addRange（新范围）；
}
$（“按钮”）。单击（createSpan）

.inline公式{
背景色：红色；
显示：内联块；
}
#编辑{
宽度：100%；
身高：100%；
}

创建跨度
这是一个可编辑的区域。

问题在于，您需要在结尾处添加一些可编辑的内容才能使其正常工作。对于同一个问题，现有的SO线程有很多。你可以看到下面

结合上面线程的知识，我能想到的最简单的事情就是在下面添加

keyup

handler

$("#editor").on('keyup',(e) => {
  var editor = $("#editor").get(0)
  var cn = editor.childNodes;

  if (cn[cn.length - 1].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.appendChild(empty);
  }

 if (cn[0].nodeType !== Node.TEXT_NODE)
  {
     empty = document.createTextNode( '\uFEFF' );
     editor.prepend(empty);
  }
})

这确保有一个文本节点要跳出div。如果需要，可以对开始的

div

执行相同的操作。下面是相同的JSFIDLE

---

这项工作非常出色！奇怪的是，它在Firefox中不起作用，但在Chrome中却很有魅力，这很好，因为我正在构建一个桌面应用程序。非常感谢你！我必须等8个小时才能颁发奖金，所以我会在那时候做。顺便说一句，它在FirefoxDeveloper61中工作，而不是在FF60中。所以一些FF的问题会在FF61出来的时候解决。哦，好吧，那就更好了。再次感谢。事实上，现在在FF60中也能工作了。但这里只需要一个小的延迟或双向右箭头