textarea.value 与 contenteditable 无法通过 value 属性同步，因后者无 value 属性；正确方式是监听 input 事件，手动双向更新 innerHTML/textContent 并防死循环。
textarea 的 value 属性不能直接用于同步 contenteditable 元素——因为后者根本没有 value 属性，这种“属性对齐”思路从底层就走不通。
为什么 textarea.value 和 contenteditable 无法靠 value 绑定
textarea 是表单控件，它的内容由 element.value 管理；而 contenteditable="true" 元素（如 <div>）是普通容器，内容存于 innerHTML 或 textContent。浏览器不会为它生成或响应 value 属性——你写 <div contenteditable value="xxx"></div>，value 会被静默忽略。
常见错误现象：
- 在 Vue/React 中写
<div contenteditable v-model="text"></div>，界面无反应，控制台也无报错（静默失效） - 试图用
el.setAttribute('value', str)更新contenteditable元素，DOM 看似没变化 - 用
textarea.value = div.innerHTML同步后，再修改textarea，div不更新——因为没监听input事件
正确同步路径：只用 input 事件 + innerHTML/textContent
同步必须走 JavaScript 手动桥接，核心是双向监听 + 安全赋值。关键不是“让它们共享 value”，而是“让一方变，另一方立刻按需更新 DOM 节点”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 从
textarea→contenteditable：监听textarea的input事件，取textarea.value，赋给div.innerHTML（富文本）或div.textContent（纯文本） - 从
contenteditable→textarea：监听div的input事件（不是change），取div.innerHTML或div.textContent，写入textarea.value - 避免死循环：在写入目标元素前，先比对新旧值（
if (newVal !== oldVal)），尤其注意innerHTML可能因格式化产生差异（比如换行符、空格） - IE11 及更早版本需额外监听
DOMCharacterDataModified和selectionchange，现代项目可跳过
innerHTML vs textContent：选哪个？
取决于你是否需要保留格式：
- 用
innerHTML：用户粘贴带<strong>、<p>的内容能保留结构，但必须过滤 XSS（例如移除<script>、onerror=等） - 用
textContent：天然防 XSS，但所有标签都会变成纯文字（<p>hello</p>显示为字面量），且不支持粗体、换行等样式语义 - 性能影响：频繁设置
innerHTML会触发重排重绘，textContent更轻量；若内容含大量 HTML，考虑节流或使用innerText（但注意其会受 CSSdisplay: none影响）
容易被忽略的光标与焦点问题
手动同步时，div.innerHTML = newValue 会重置光标位置到开头——用户正在中间编辑，一输入就跳到最前面。这不是 bug，是 DOM 替换的必然行为。
解决方案有限且复杂：
- 不做光标保持：适用于预览类场景（如右侧
contenteditable仅作展示） - 用
document.getSelection()+RangeAPI 手动保存/恢复光标，但兼容性和边界 case（如跨标签编辑、删除整段）极难处理 - 改用专业库（如
slate.js、tiptap），它们内置光标管理，但代价是 bundle 体积和学习成本
真正轻量又可靠的方案，其实是放弃“完全同步”，转为单向驱动：让 textarea 作为唯一数据源，contenteditable 仅作只读渲染层——这样既避开光标问题，又规避 XSS 和死循环风险。
