contenteditable元素无法直接用v-model绑定，因其无value属性，需监听input事件并手动同步innerhtml或innertext；注意防死循环、xss风险及光标丢失问题。
contenteditable 元素无法直接用 v-model 或 value 绑定
Vue、React 等框架的双向绑定机制默认只作用于原生表单控件（input、textarea），而 contenteditable 元素是普通 HTML 元素，没有 value 属性，它的内容通过 innerHTML 或 textContent 读写。直接写 <div contenteditable v-model="text"></div> 会静默失效。
实操建议：
- 监听
input事件（不是change）——contenteditable在内容变化时触发input，且频率合理 - 用
ref拿到 DOM 元素后，读取el.innerText（纯文本）或el.innerHTML（带格式）；写入时用el.innerHTML = newValue - 注意：IE11 及更早版本需监听
DOMCharacterDataModified和selectionchange，现代项目可忽略
为什么不能只用 innerHTML 做数据同步
innerHTML 会把用户粘贴的富文本、<script></script> 标签、不闭合标签等原样保留，导致后续渲染时出现意外交互或 XSS 风险。更重要的是，它无法区分“用户输入”和“框架写入”——比如你用 JS 设置 el.innerHTML = 'hello'，也会触发 input 事件，造成死循环。
实操建议：
- 在事件回调中加防抖或标记位，例如设置
isUpdating = true，写入前设为true，写入后延时置为false，再在input回调开头if (isUpdating) return - 如需过滤 HTML，用
DOMPurify.sanitize(html)替代原始innerHTML；纯文本场景优先用innerText读写 - 避免在
input中直接调用setState或ref.value = ...后立刻写回 DOM，容易引发重入
光标位置丢失与恢复是个隐藏大坑
每次用 innerHTML = newValue 赋值，浏览器都会重排整个元素内容，导致光标跳到开头或末尾，用户体验断裂。这不是 bug，是 contenteditable 的固有行为。
实操建议：
- 保存光标位置：在
beforeinput或focus时用window.getSelection()+range.getClientRects()记录坐标，或用range.startOffset记录字符偏移（仅适用于纯文本） - 恢复光标：赋值后用
range.setStart(el, offset)+sel.removeAllRanges()+sel.addRange(range) - 更轻量方案：改用
textContent替代innerHTML（放弃内联样式/标签），此时光标位置基本稳定；或使用document.execCommand（已废弃但兼容性好）做局部修改
移动端 focus 失效与键盘唤起失败
iOS Safari 对 contenteditable 的 focus 控制极严：无用户手势（如点击）触发时，el.focus() 无效；部分安卓 WebView 也不响应 autofocus 或 click() 触发的 focus。
实操建议：
- 确保绑定
click或touchstart事件，并在事件处理器中调用el.focus()，且不能包裹在异步回调里（如setTimeout） - 给元素加
tabindex="0"，否则 iOS 默认不可聚焦 - Android 上若键盘不弹出，尝试在
focus后短暂延迟（setTimeout(() => el.click(), 100)）模拟二次激活 - 不要依赖
document.activeElement判断是否获得焦点，iOS 下它可能滞后或不准
真正麻烦的从来不是“怎么让内容显示出来”，而是“怎么让用户觉得它一直就在那儿编辑”。光标、撤销栈、粘贴处理、空行渲染、列表缩进——这些细节堆起来，才决定一个 contenteditable 编辑器到底能不能用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
