javascript - contenteditable 将焦点移动到行中的位置
问题描述
您好，我正在构建一个基于块的富文本编辑器，并发现使用多个 contenteditable 块会破坏从一行中心移动到上面一行中心的问题。
正常行为是焦点移动到当前内容可编辑字段的开头，例如。从这里
<div contenteditable>this is a text<div>
<div contenteditable>this is a| text<div>
至
<div contenteditable>this is a text<div>
<div contenteditable>|this is a text<div>
使用 js，我可以将当前选择捕获为范围并获取 DOMRECT 以检查范围是否在该元素的最上面一行，然后触发焦点移动到其上方的 contenteditable 字段，例如：
<div contenteditable>this is a text<div>
<div contenteditable>this is a| text<div>
至
<div contenteditable>this is a text|<div>
<div contenteditable>this is a text<div>
问题是这不会将插入符号移动到上面的位置，而只是移动到 contenteditable 块的开头或结尾
我找到了像https://editorjs.io/这样的工具，但它的实现只是先跳到元素的开头，然后再跳到上面元素的结尾。然后我发现https://www.notion.so并且它的编辑器实际上可以移动到以前的 contenteditable 字段，所以需要有一个可能的解决方案
对于概念，这也适用于非等宽字体，因为我首先认为它们根据元素计算行的宽度，然后添加字符的宽度以达到与下一行对插入符号相同的宽度百分比
所以我的问题是如何根据插入符在下部 contenteditable 字段中的位置计算插入符需要进入上部 contenteditable 字段中的位置，以便我的结果可以像这样工作：（这次写的没有 html 标签更好的可读性）
this is a text
this is the second line of block one
this is a| text
this is the second line of block two
至
this is a text
this is t|he second line of block one
this is a text
this is the second line of block two
谢谢你的时间
PS 概念编辑器也在使用多个 contenteditable 字段