富文本编辑器不直接运行html代码，因其默认过滤危险标签防xss；即使源码模式输入或也会被清空；contenteditable直接innerhtml赋值虽可渲染但高危且破坏编辑功能；真正关联html需配置双向映射，如tinymce用paste_postprocess、ckeditor5配htmlsupport插件、quill用dangerouslypastehtml，但输出html常含冗余样式，需额外清洗转换。
富文本编辑器里直接运行 HTML 代码，不是“打开开关就能用”的事——它取决于编辑器是否允许解析 HTML、是否开启渲染模式、以及你插入的 HTML 是否被过滤或转义。多数现代富文本编辑器（如 Quill、TinyMCE、CKEditor 5）默认会剥离或转义原始 HTML，防止 XSS，所以你看到的“HTML 编辑”功能，往往只是源码视图，而非可执行环境。
为什么在富文本编辑器里写 <script></script> 或 <iframe></iframe> 不生效
绝大多数富文本编辑器出于安全考虑，在内容渲染阶段主动过滤危险标签和属性。即使你在源码模式下输入了 <script>alert(1)</script>，保存后也会被清空或变成纯文本；<iframe></iframe> 同理，除非编辑器明确支持嵌入白名单（如 YouTube 视频 ID），否则会被移除。
-
TinyMCE默认启用valid_elements和extended_valid_elements白名单机制，未声明的标签直接丢弃 -
CKEditor 5使用downcast+upcast渲染管道，自定义 HTML 需配套编写转换规则，否则不识别 -
Quill的核心设计不支持任意 HTML，只接受其 Delta 格式，dangerouslyPasteHTML是唯一绕过方式，但仅限粘贴时且仍受 sanitizer 限制
contenteditable 元素里直接写 HTML 会怎样
如果你绕过富文本库，直接操作一个 contenteditable="true" 的 <div> 并用 <code>innerHTML 赋值含标签的字符串，浏览器确实会渲染——但这是高危操作：XSS 漏洞直连，且格式混乱（比如换行变成 <br>，而富文本通常需要段落包裹 <p></p>）。更麻烦的是，后续用户光标定位、撤销/重做、键盘事件（如 Enter）行为全部不可控。
- 不要用
el.innerHTML = '<h2>标题</h2> <p>正文</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>'初始化可编辑区域 - 若必须初始化 HTML，优先走编辑器提供的 API，例如
editor.root.innerHTML = ...（仅限 Quill 低版本或自研场景），并确保已禁用 sanitizer - 所有外部 HTML 输入必须先经 DOMPurify 等库清洗，至少保留
<h1-6></h1-6>、<p></p>、<strong></strong>、<em></em>、<ul></ul>/<ol></ol>及其子元素
如何让富文本真正“关联”HTML 编辑与运行
真正的关联不是让编辑器“显示 HTML”，而是建立「HTML ↔ 编辑器内部数据模型」的双向映射。这需要配置或开发两层能力：输入时能解析 HTML 成编辑器理解的结构，输出时能把结构准确转回语义化 HTML（而非一堆 <span style="font-weight:bold"></span>）。
-
TinyMCE：启用convert_urls: false+paste_as_text: false+ 自定义paste_postprocess处理粘贴 HTML；导出用editor.getContent({ format: 'html' }) -
CKEditor 5：需安装@ckeditor/ckeditor5-html-support插件，并在配置中声明htmlSupport: { allow: [{ name: /.*/, attributes: true, classes: true, styles: true }] }（生产环境慎用通配） -
Quill：官方不推荐 HTML 流，可用quill.clipboard.dangerouslyPasteHTML(html)插入，但输出必须调用quill.root.innerHTML（非 Delta），且无法保证样式一致性
最常被忽略的一点：富文本编辑器的“HTML 输出”往往不是标准 HTML，而是带内联样式、冗余 <span></span>、无语义标签的产物。如果下游要用于邮件模板、静态站点生成或 SEO 页面，得额外加一层转换逻辑——别指望编辑器吐出来的 HTML 能直接进 prettier 或通过 W3C 验证。
