用 contenteditable 实现带高亮的富文本编辑器，为什么光标总是跳？
原创
用 contenteditable 实现带高亮的富文本编辑器，为什么光标总是跳？
超哥前端记录
发布于 2026-10-05 17:17:32
发布于 2026-10-05 17:17:32
概述
在后台管理系统中做富文本评论框时，我选用了 contenteditable 来做轻量编辑器，需求很简单：输入 @ 时弹出用户列表，选中后插入一个带高亮的 mention 标签。但实际开发中遇到一个很烦的问题——每次用 JavaScript 修改 innerHTML 后，光标要么跳到开头，要么直接消失，中文输入法下尤其明显。排查后发现，根源是直接替换 DOM 导致浏览器无法保留原有的选区信息。这篇文
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号