富文本编辑器插入代码块须通过 dom 操作创建安全节点并插入光标位置，禁用 innerhtml 拼接和 execcommand；需转义 html 实体、处理不可见字符、统一换行符，并借助编辑器扩展机制支持语法高亮。
富文本编辑器里插入代码块，不是把 <pre class="brush:php;toolbar:false;"><code></code> 直接粘进去就完事——它会被解析成普通 HTML 元素，甚至触发脚本执行或格式错乱。必须走 DOM 操作路径，且要绕过浏览器的自动解析逻辑。</pre>
contenteditable 区域内插入预格式化代码块
在 contenteditable 元素中插入代码块，不能用 innerHTML +=，否则尖括号会被解析、换行被忽略、样式丢失。核心是：先创建安全节点，再插入到光标位置。
- 用
document.createTextNode()包裹已转义的字符串（如<div> → <code><div>），再塞进<pre class="brush:php;toolbar:false;"><code></code> 结构里 </pre> <li>获取当前选区：<code>const selection = window.getSelection()；若无选区，需 fallback 到光标末尾插入 - 用
range.insertNode()把完整<pre class="brush:php;toolbar:false;"><code>...</code></pre>节点插进去，而不是拼字符串 - 插入后调用
range.collapse(false)把光标移到新块后面，避免用户继续输入覆盖结构 - 所有浏览器都会对传入的
htmlString做二次解析，<script></script>可能被执行，<img src="x" onerror="alert(1)">不会过滤 -
<pre class="brush:php;toolbar:false;"></pre>里的换行在某些旧版 Safari 中仍被压缩成单行，white-space: pre-wrap也不一定生效 - 如果目标编辑器用了 iframe +
designMode，父页面调用execCommand会失效，必须切到iframe.contentDocument上执行 - 不推荐用于插入带语言标识的高亮代码块（如
class="js"），因为多数编辑器会 strip 掉 class 或重写标签结构 - Quill 推荐用自定义 Blot：继承
Parchment.Embed，把<pre class="brush:php;toolbar:false;"><code></code> 封装为一个不可拆分的 Block，再注册进编辑器</pre> - TipTap 的
commands.insertContent()接收的是 ProseMirror JSON node，不是 HTML 字符串；需先用generateHTML()或parseHTML()转换，且确保 parser 白名单允许pre和code标签 - 无论哪种库，插入前必须对原始代码内容做 HTML 实体转义——不能依赖库自动处理，尤其当代码来自用户粘贴或后端返回时
- 如果要支持语言检测和高亮，别在插入时硬编码
class="python"，而应统一走编辑器的“代码块节点”扩展机制（如 Quill 的code-block格式），由渲染层动态加 class - 从 VS Code 或 Word 复制的代码常含零宽空格（
）、软连字符（‐）、全角引号（“”），这些在textContent插入时不会被过滤，但会导致 JS 语法错误 -
<pre class="brush:php;toolbar:false;"></pre>默认用等宽字体，但缩进若混用 Tab 和空格，tab-sizeCSS 属性未设时，Chrome 和 Firefox 渲染宽度不同 - 服务端返回的代码字符串若含 Windows 换行（
\r\n），部分编辑器解析时会多出空行；建议统一 normalize 为\n - 插入后检查
element.innerText是否与预期一致——这是验证是否被意外解析的最快方式
用 document.execCommand 插入代码块的局限性
document.execCommand('insertHTML', false, htmlString) 看似方便，但实际踩坑密集：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
第三方编辑器（Quill / TipTap）中插入代码块的正确姿势
这类库封装了底层 DOM 操作，但暴露的 API 并不都支持原生插入 <pre class="brush:php;toolbar:false;"><code></code>。强行用 <code>dangerouslyPasteHTML</code> 或 <code>clipboard.dangerouslyPasteHTML</code> 仍有 XSS 风险。</pre>
最易被忽略的细节：空格、换行与不可见字符
哪怕 DOM 插入完全正确，代码块显示仍可能错位或报错，问题往往出在内容本身：
