请教前端达人,知乎的编辑器是怎样实现这个功能的
发布网友
发布时间:2022-04-24 07:33
我来回答
共1个回答
热心网友
时间:2022-04-20 05:28
在线富文本编辑器里面,做以下操作:
选中一串文字,点击“ B ”把它加粗。
把游标移到这串文字的中间,再点“ B ”。
输入一些文字。
在大部分其他的编辑器里面,到第二步的时候,刚才加粗的所有文字都回复了正常状态:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
而知乎的编辑器的效果是这样:
step1: some bold text
step2: some bold text
step3: some inserted text bold text
从 HTML 上面看,它是把一个<b></b>节点拆成了三个节点:
<b>some</b>inserted text<b>bold text</b>.
问题是:在 contentEditable 上的编辑操作只能更新当前节点的文本内容,也就是说如果没有 js 干预,效果是这样:
<b>some inserted text bold text</b>
知乎的编辑器是怎样完成分拆动作的?
监听 keypress 事件?那输入中文怎样实现?
监听 change ?