富文本编辑器与html编辑不可混用，因其内部严格约束html生成、过滤危险标签并维护数据模型；应优先调用编辑器api操作，仅导出时用dompurify清洗html。
不能直接提升——HTML 编辑和富文本编辑是两类不同抽象层级的工具，强行混用反而容易破坏内容结构、引入 XSS 风险或导致渲染不一致。
富文本编辑器（如 TinyMCE、Quill、CKEditor）本质是「HTML 的封装界面」
它们内部确实生成并操作 HTML，但会做大量约束：过滤危险标签（<script></script>、<iframe></iframe>）、标准化样式（用 <span style="font-weight: bold"></span> 还是 <strong></strong>？）、处理光标/选区边界等。你手动改其输出 HTML，下次用户点一下加粗按钮，整个结构可能被重写。
- 典型现象：
innerHTML = editor.getData()拿到的 HTML 看似“可编辑”，但直接塞进contenteditable或用DOMParser改完再塞回去，常触发编辑器内部状态错乱，光标消失或格式丢失 - 正确做法：优先调用编辑器自身 API，比如 CKEditor 的
model.change()、Quill 的formatText()或clipboard.convert() - 例外场景：仅限导出/存档用途——此时可取 HTML，但需用
DOMPurify.sanitize()过滤后再存储，而非用于二次编辑
contenteditable 不等于富文本编辑器
很多人以为给 <div contenteditable="true"> 加点 JS 就能替代专业编辑器，实际会立刻撞上三座山：回车换行行为不统一（Chrome 插 <code><div>，Firefox 插 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器"><img
src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="overflowclass">HTML汇报生成器</a>
<p class="overflowclass">🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>）、剪贴板粘贴 HTML 时标签被剥离、撤销栈（document.execCommand('undo')）早已被弃用且不可靠。
- 常见错误：监听
input事件后用innerHTML提取内容，结果粘贴 Word 表格时得到一堆<rect></rect>和内联mso-样式，根本无法清洗 - 关键差异：富文本编辑器会接管剪贴板事件（
beforeinput、paste），预解析 HTML 片段并映射到自己的数据模型；contenteditable只是浏览器原生行为，无控制权 - 如果真要轻量定制，用
ProseMirror或Tiptap（基于 ProseMirror）比手搓contenteditable稳定十倍——它们把 HTML 当作序列化格式，而非操作目标
需要“提升富文本”时，真正该动的是数据层，不是 HTML 字符串
所谓“提升”，通常指支持表格、代码块、嵌入视频等扩展能力。这些必须在编辑器的数据模型（Schema）和命令系统中定义，而非后期往 HTML 字符串里塞 <figure></figure> 标签。
- 例如：想让用户插入 Mermaid 图表，得注册自定义节点（node type），实现
toHTML()和parseHTML()方法，确保编辑时是交互式组件，导出时才转成<div class="mermaid">graph TD... <li>反模式：存 HTML 时保留 <code><div data-type="mermaid">，前端用 <code>innerHTML渲染后手动初始化 Mermaid——这会导致编辑态和预览态不一致，且无法参与撤销/协作编辑 - 性能提示：直接操作 HTML 字符串做批量格式替换（如把所有
<p></p>换成<section></section>）看似快，但会绕过编辑器虚拟 DOM diff，引发重绘抖动，尤其在长文档中
真正难的不是怎么写 HTML，而是理解富文本编辑器如何把用户意图映射为可逆、可协作、可验证的数据结构——HTML 只是它在某一环节的中间产物或输出格式，不该成为操作主干。
