如何解决可编辑的内容将焦点移到行中
您好,我在构建一个基于块的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 举报,一经查实,本站将立刻删除。