将插入符号放置到 contenteditable div

如何解决将插入符号放置到 contenteditable div

我目前正在使用 contenteditable div 制作一个所见即所得风格的编辑器。

div 有子元素，它们是 span 标签。

这个 div 最初只有一个跨度，没有像下面这样的文字。

<div><span></span></div>

然后如果我输入文本，“嗨，世界你好！”并在 Hello 上加上“粗体”。

那么，contenteditable div 的 html 结构如下所示。我对它进行了编码，这不是默认的 contenteditable 值。

<div
     data-block-id="8e809118-ffd8-48e7-b875-afbffd8241cf" 
     class="EditableBlock__Self-sc-7qskqk-0 fOnYdI"
     contenteditable="true"
>
  <span>Hi,</span>
  <span style="font-weight: 700;">Hello</span>
  <span> World!</span>
</div>

⠀⠀⠀⠀⠀⠀⠀⠀⠀

问题

问题是我有一个插入符号移动问题。

当我尝试通过按 command + 向左箭头或 command + 向右箭头将插入符号移动到焦点句子的末尾时。它不像我想的那样工作，并且插入符号被卡在当前的单个跨度内并且不会移动到下一个跨度。

issue 1 gif image

当我尝试跳过某些单词并将插入符号移动到下一个单词时，请按 option + 向左箭头或 option + 向右箭头。它有效，但我必须再按一次这些键才能从当前跨度移动到下一个同级跨度。

我在谷歌上搜索了一些资源，但其中大部分都与这个问题没有直接关系，而且很旧。

供您参考，当 contenteditable div 只有一个子跨度时，不会出现这两个问题。

当我使用 contenteditable div 时，我不得不手动处理 document.selection 和 range。

我想知道我必须再次手动处理插入符号才能解决这个问题吗？

感谢您阅读这个长问题，如果您对此有任何想法，我们将不胜感激。