insertHtml 问题主因是HTML未闭合、样式污染和光标丢失；应使用预设class替代内联style，确保标签严格配对，变量注入前必须escapeHtml，仅允许编辑器白名单标签，并插入后调用K.sync()。
直接用 insertHtml 插入复杂模板，90% 的问题出在 HTML 结构未闭合、样式污染或光标位置丢失——不是 API 不行，而是没控制好上下文。
为什么 insertHtml 会把编辑器样式搞乱
KindEditor 的 insertHtml 会原样插入字符串，但不自动包裹语义容器，也不校验标签嵌套。比如插入一个带 <div><p><span> 的模板，若当前光标在 <li> 内部，就可能破坏列表结构；再叠加内联 style，极易覆盖编辑器默认字体、行高、缩进等基础样式。
- 避免写
<div style="margin:0;padding:10px">...，改用预设 class，例如<div class="template-card">，并在编辑器 CSS 中统一定义 - 所有模板 HTML 必须自闭合或严格配对：不用
<br>，改用<br />；<img>必须带alt和src - 插入前手动检查光标是否落在可编辑的块级节点中（如
<p>、<div>），否则内容可能被吞进不可见的<span>或<font>里
如何安全拼接含变量的模板字符串
别把用户输入直接插进模板字符串里拼接 HTML，insertHtml 不做转义，${userInput} 可能带 <script> 或 onerror= 属性，触发 DOM XSS。
- 变量注入前必须走
escapeHtml()：例如const safeName = userInput.replace(/[&"'/]/g, c => ({ '&': '&', '': '>', '"': '"', "'": ''', '/': '/' }[c])); - 结构复杂时拆成函数，比如
renderSignatureBlock({ name, title, phone })返回纯 HTML 字符串，主逻辑只负责组装，不混业务判断 - 模板中禁用 JS 表达式（如
${items.map(...).join('')}），改用预处理：先生成数组，再.map(item => `<li>${escapeHtml(item)}</li>`).join('')
insertHtml 后内容无法编辑或格式错乱
常见于插入了非标准块级结构（如孤立 <h3>、无父容器的 <table>）或用了编辑器不识别的标签（如 <article>、<section>）。KindEditor 默认只允许白名单内的标签参与格式化。
立即学习“前端免费学习笔记（深入）”；
- 插入前用正则粗筛：确保模板只含
<p>、<div>、<h1>-<h6>、<ul>/<ol>/<li>、<table>/<tr>/<td>/<th>等编辑器原生支持的标签 - 避免在模板开头写
<br>或空白<p></p>，这会让光标“悬空”，后续输入容易跳到上一段末尾 - 插入后手动触发一次
K.sync()（如果使用 KindEditor），强制同步 iframe 内容到 textarea，防止提交时丢失新内容
真正难的不是怎么插，而是插完之后用户还能继续正常编辑——这意味着模板得像“活体组织”一样融入编辑流，而不是一块硬塞进去的补丁。每次加新模板，都该拿真实编辑场景跑一遍：删几段、回车、粘贴、切换格式，看它会不会裂开。
