HTML5可视化编辑器过滤块是因底层API对嵌套块级元素处理不友好，需通过API注入View节点或启用codeBlock插件实现可靠插入与导出。
HTML5 可视化编辑器里插入
多数 HTML5 可视化编辑器（如 TinyMCE、CKEditor 5、Quill、或基于 contenteditable 的自研编辑器）默认会过滤或自动修正嵌套的 结构——不是你写错了，是编辑器主动“清理”了它。
根本原因是：这些编辑器底层依赖浏览器原生 document.execCommand 或现代 insertHTML API，而它们对块级嵌套、换行符、空白符处理极不友好； 单独出现会被转义， 套在一起常被截断成只剩 或直接丢弃内层 标签。
- CKEditor 5 默认禁用
作为独立元素，只允许通过codeBlock插件以数据模型方式注入 - TinyMCE 6+ 需显式在
valid_children和extended_valid_elements中放开pre[code] - 基于
contenteditable的轻量编辑器（如 MediumEditor 衍生版）往往根本不解析，只当纯文本渲染
绕过过滤：用 editor.setData() 或 insertContent() 手动注入
别依赖工具栏按钮或粘贴，直接走 API 注入原始 HTML 片段。这是最稳的方式，尤其适合后台配置好代码块后前端一次性渲染。
以 CKEditor 5 为例：
立即学习“前端免费学习笔记（深入）”；
editor.model.change( writer => {
const paragraph = editor.model.document.getRoot().getChild(0);
editor.model.insertContent(
editor.data.processor.toView(
'console.log("hello");
'
),
paragraph
);
});
- 必须用
editor.data.processor.toView()转为 View 节点，否则直接传字符串会被当作纯文本 - 不能用
editor.setData()全量覆盖（会清空光标位置），除非你准备整页初始化 - 若需保留光标上下文，优先用
editor.model.insertContent()+ 定位到当前 selection
如果必须支持用户手动输入：改用 codeBlock 插件而非原生 HTML
可视化编辑器里让用户“点一下加代码块”，本质不是插入 HTML，而是插入一个受控的 codeBlock 模型节点——它在数据层是干净的，在视图层才渲染为 。
例如 TinyMCE 需启用：
tinymce.init({
plugins: 'codeblock',
toolbar: 'codeblock',
code_block_languages: [
{text: 'JavaScript', value: 'javascript'},
{text: 'HTML', value: 'html'}
]
});
- 启用后工具栏出现「代码块」按钮，点击插入的是语义化节点，不会被过滤
- 语言选择写入的是
data-language属性，不是class，高亮库（如 highlight.js）需适配该属性读取 - 禁止用户粘贴原始
—— 粘贴时用paste_preprocess钩子统一转成codeBlock节点
导出时保留代码块：别信 editor.getData() 的默认输出
editor.getData() 返回的 HTML 很可能把 codeBlock 节点又“降级”回普通 ，甚至丢失 language 属性。导出前务必检查实际结构。
- CKEditor 5：用
editor.data.get({ trim: false })并确认codeBlock插件已注册，否则 fallback 到不带 class - TinyMCE：设置
forced_root_block: false+verify_html: false（仅限可信内容场景）防止自动包裹 - 所有场景下，导出后建议用正则校验：
/]*>\s*
]*class=["']([^"']*)["'][^>]*>/是否匹配成功
真正麻烦的不是怎么插进去，而是插进去之后编辑器还“认不认识它”——同一段代码，在编辑态、保存态、渲染态，DOM 结构可能完全不同。盯紧你的数据流，别只看工具栏按钮有没有点亮。
