在Chrome中设置插入符号位置

Question

在我的HTML中，我有一个contenteditable字段，里面有一个空<strong>标记。当用户点击此字段时，我希望他们的键入 in 该空标记。当我们之前实施此行为时，Chrome过去行为恰当，并将您的插入符号放在元素中，并允许您输入带有文本<strong>的ed，但是，Chrome会将您的插入符号放在标记之前，它非常破坏格式化。

当时，Firefox没有将您的插入符号放在空标记内，因此我们实现了此代码以使Firefox正常运行：

$(document).on "mousedown click", ".data_inline", (e) ->
  $child = $(this).children().first()


  if $child.length == 1 && $.trim($child.html()) == ''
    # Feature detection
    if window.getSelection && document.createRange
      range = document.createRange()
      range.selectNodeContents($child[0])
      sel = window.getSelection()
      sel.removeAllRanges()
      sel.addRange(range)

这非常有效，并使Firefox和Chrome浏览器都能正确处理该字段。 现在，无论出于何种原因，Firefox仍在使用，但Chrome不是。 Chrome会将您的插入符号放在元素之前，并且您的输入操作发生在<strong>之外（或有时<u>）。

我在这里举了一个这种尴尬行为的例子： https://codepen.io/nzifnab/pen/oGJLNW

正如您所看到的，如果您点击Chrome中的第一个字段并开始输入，最后会留下一大块空白（由于该字段的css规则为:empty），因为您的插入符号之前应该在其中的空标记。 sel.addRange(range)似乎什么也没做......而且我不确定我能做些什么来修复它。第二个字段，如果您单击它，则会正确突出显示<strong>的内容，并且键入将按预期执行，为您提供粗体文本。

两个字段在Firefox中的和中都能正常工作。