富文本编辑器不是HTML编辑器，而是所见即所得的HTML生成器；需源码模式或CodeMirror等方案才能可靠编辑HTML，且必须后端用DOMPurify白名单过滤。
富文本编辑器本身不等于HTML编辑器
富文本编辑器（如 Quill、TinyMCE、CKEditor）输出的是 HTML 字符串，但它们屏蔽了原始标签操作——用户看不到 <div>、<p>、style 属性，也不能直接写内联 JS 或自定义属性。这不叫“HTML 编辑”，只是“所见即所得的 HTML 生成器”。
如果你的需求是让用户手动改 class、调整 data-* 属性、嵌入 <iframe> 或修复错位的 </span>，那必须切换到纯文本/源码模式，或换用真正的 HTML 编辑器（比如基于 CodeMirror 或 Monaco 的方案）。
哪些富文本编辑器支持可靠的 HTML 源码编辑
不是所有“源码按钮”都靠谱。很多编辑器的源码模式只是个 <textarea>，粘贴进非法 HTML 后，切回富文本会自动清洗掉 <script>、onerror、javascript: 等内容，甚至重排结构。
-
TinyMCE：开启plugins: ['codepen', 'codesample']并配置valid_elements和extended_valid_elements才能保留自定义标签和属性 -
CKEditor 5：默认禁用原生 HTML 输入；需使用@ckeditor/ckeditor5-html-support插件，并显式声明允许的标签和属性（如allowedContent: 'div[role,data-id]'） -
Quill：原生不支持任意 HTML；必须配合quill-html-edit-button这类第三方模块，且编辑后需调用editor.clipboard.dangerouslyPasteHTML()才能生效，否则会被过滤
直接用 contenteditable 写 HTML 编辑器？小心这些坑
有人想绕过富文本库，直接用 div[contenteditable="true"] + document.execCommand() 拼一个轻量方案——这在现代浏览器里已基本不可行。
立即学习“前端免费学习笔记（深入）”；
-
execCommand是废弃 API，Chrome 98+ 已移除部分命令，Firefox 也仅保留有限支持 -
contenteditable对粘贴 HTML 的解析行为各浏览器不一致：Safari 会自动包裹段落，Edge 可能丢掉style，而 Ctrl+V 粘贴的<table>在不同版本中可能被拆成多个<div> - 无法控制光标在标签间的行为：比如把光标放在
<p>abc</p>的</p>后面，再输入文字，Chrome 会新建<p>，Firefox 可能插入到父节点末尾
真正需要“运行 HTML 编辑”的场景，该选什么
如果你要做的不是发公众号文章，而是 CMS 后台管理模板、邮件内容编辑、或者低代码平台的区块 HTML 自定义，那么：
- 优先考虑
CodeMirror 6+@codemirror/lang-html：支持语法高亮、自动闭合、错误提示，且输出就是原始字符串，无二次解析 - 若需预览联动，别用 iframe
srcdoc直接渲染（有 CSP 和样式隔离问题），改用DOMParser解析字符串后挂到 sandboxediframe.contentDocument中 - 禁止用户输入
<script>？别依赖前端过滤——后端存储前必须用 DOMPurify 处理，且配置{ALLOWED_TAGS: [], ALLOWED_ATTR: []}显式白名单，而不是靠SAFE_FOR_JQUERY这类宽松 preset
HTML 编辑的复杂性不在语法高亮，而在解析一致性、执行上下文隔离、以及前后端对“合法 HTML”的定义是否对齐。少信“一键支持 HTML”的宣传，多看它怎么处理 <img onerror="alert(1)">。
