问题描述
我目前正在使用 contenteditable div 制作一个所见即所得风格的编辑器。
div 有子元素,它们是 span 标签。
<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 + 向右箭头将插入符号移动到焦点句子的末尾时。它不像我想的那样工作,并且插入符号被卡在当前的单个跨度内并且不会移动到下一个跨度。
我在谷歌上搜索了一些资源,但其中大部分都与这个问题没有直接关系,而且很旧。
供您参考,当 contenteditable div 只有一个子跨度时,不会出现这两个问题。
当我使用 contenteditable div 时,我不得不手动处理 document.selection 和 range。
我想知道我必须再次手动处理插入符号才能解决这个问题吗?
感谢您阅读这个长问题,如果您对此有任何想法,我们将不胜感激。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)