当前位置:首页 » 网页前端 » web前端达人评论
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web前端达人评论

发布时间: 2023-08-01 04:54:08

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

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