可编辑的内容将焦点移到行中

问题描述

您好，我在构建一个基于块的RichText编辑器时，发现了使用多个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字段，因此需要一个可能的解决方案

对于概念，这也适用于非等宽字体，因为我首先认为它们基于元素来计算行的宽度，然后将字符的宽度相加，以得到与下部行相同的宽度百分比。插入符

所以我的问题是我如何根据插入符在较低内容可编辑字段内的位置来计算插入符在较高内容可编辑字段内所需的位置，以便我的结果像这样工作：（这次编写时没有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

感谢您的时间

P.S。概念编辑器还使用了多个可编辑的字段

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）