ContentEditable 本身不提供富文本实时预览，仅使元素可编辑；预览需手动同步DOM、过滤冗余标签、重置样式并监听input/compositionend事件确保准确渲染。
ContentEditable 本身不提供富文本实时预览——它只让元素可编辑，预览效果必须靠手动同步或 DOM 监听实现，否则你看到的只是原始 HTML，不是渲染后的真实样式。
为什么直接设 contenteditable="true" 不等于“预览”
浏览器把 contenteditable 元素当作编辑容器，它会保留用户输入产生的内联样式（如 <strong>、<span style="color:red">），但这些标签不会自动转换成你 CSS 中定义的视觉效果，除非它们已存在于当前页面样式中。常见误区是以为开启后就能“所见即所得”，结果发现加粗文字没变粗、列表项没缩进、甚至换行变成 <br> 而非 <p>。
关键点：
-
contenteditable不解析 HTML 字符串，它操作的是 DOM 树；粘贴富文本时，浏览器按自身规则转换（Chrome 和 Firefox 对<ol>的处理就不同） - 没有默认样式隔离，编辑区样式会受全局 CSS 污染（比如你页面里写了
p { margin: 0 }，那编辑区里的段落也会没间距） - 不能直接用
innerHTML取值做“预览”，因为里面混着浏览器插入的不可见节点（如<div class="Apple-style-span">）和冗余<br>
用 input 和 compositionend 事件监听真实编辑变化
仅靠 keyup 或 change 无法捕获所有修改：中文输入法上屏、拖拽插入图片、右键粘贴都会跳过。必须组合监听：
立即学习“前端免费学习笔记（深入）”；
-
input：覆盖大多数情况（包括删除、粘贴、格式化操作） -
compositionend：确保中文输入法完成输入后才触发（避免取到不完整文本） - 对
document.execCommand（已废弃但仍有遗留调用）或自定义 toolbar 按钮，需在对应逻辑末尾手动触发同步
示例节选（监听并提取干净 HTML）：
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const syncPreview = () => {
// 清理浏览器注入的冗余标签和属性
const cleanHTML = editor.innerHTML
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/class="[^"]*Apple-[^"]*"/gi, '')
.replace(/data-[^=]*="[^"]*"/gi, '');
preview.innerHTML = cleanHTML;
};
editor.addEventListener('input', syncPreview);
editor.addEventListener('compositionend', syncPreview);
预览区必须用独立 <div contenteditable="false"> + 样式重置
别把编辑区 DOM 直接 clone 到预览区——那样会带入编辑态焦点、光标、不可见字符，且可能触发意外 focus/blur 行为。正确做法是用一个纯展示用的 <div contenteditable="false">，并施加最小化、隔离化的 CSS：
- 强制重置所有继承样式：
all: initial;（注意 IE 不支持，需 fallback） - 禁用用户选择与交互：
user-select: none; pointer-events: none; - 显式定义基础排版：
p { margin: 1em 0; }、ul, ol { padding-left: 2em; }，否则浏览器默认样式可能和编辑区不一致 - 如果编辑区用了自定义字体或颜色变量，预览区也要复现，否则“实时”就失真了
designMode 和 document.execCommand 已淘汰，别再依赖
现在主流方案是绕过这些老接口，改用：
- 原生
Selection+RangeAPI 控制光标位置（比如点击 toolbar 的「加粗」按钮后，精准包裹当前选区） - 用
execCommand的替代方案：对选区生成<strong>包裹，然后用document.execCommand('insertHTML', false, '<strong>...</strong>')仅作兜底（Chrome/Firefox 仍支持，但 Safari 已限制） - 更健壮的做法：自己解析选区 DOM，手动创建节点并插入，避免依赖浏览器命令的不确定性
容易被忽略的是：当用户用快捷键（Ctrl+B）触发加粗时，input 事件仍会触发，但此时 DOM 已被浏览器修改——所以监听本身没问题，但清理逻辑必须足够鲁棒，能处理嵌套 <span>、重复样式、空标签等边界情况。
