请教前端达人，知乎的编辑器是怎样实现这个功能的

发布网友 发布时间：2022-04-21 00:49

我来回答

共1个回答

热心网友 时间：2022-06-16 20:55

在线富文本编辑器里面，做以下操作：
选中一串文字，点击“ 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 ？