contenteditable 元素需通过 JavaScript 主动干预实现按钮功能，推荐使用 Selection/Range 操作插入自定义 HTML 并手动聚焦；避免使用已弃用的 execCommand，且插入内容应遵循编辑器样式体系、包裹语义化容器。
contenteditable 元素本身不处理按钮逻辑，所有自定义功能必须靠 JavaScript 主动干预 —— 直接绑定点击事件、调用 document.execCommand（旧 API）或操作 Selection / Range（现代推荐）。
button 点击后插入自定义 HTML 片段
这是最常见需求：比如点「插入表格」按钮，就在光标处插入一个 <table><tr><td></td></tr></table>。
- 必须先获取当前光标位置，否则内容会插到编辑器开头或末尾：
getSelection()+getRangeAt(0)是基础 - 插入前建议用
range.deleteContents()清掉当前选中文本，避免残留 - 用
range.insertNode()插入 DOM 节点，或range.insertHTML()（仅部分浏览器支持） - 插入后要手动恢复光标到合理位置（比如新表格第一个
<td>内），否则用户无法继续输入
data-command 属性不是万能的
很多教程让按钮写 data-command="insertUnorderedList" 然后直接 execCommand，但这个 API 有硬伤：
-
execCommand已被标记为 Deprecated，Chrome 97+ 开始对非标准命令（如自定义 HTML）完全不响应 - 它只支持有限内置命令（
bold、createLink等），无法插入带 class 或 style 的结构化 HTML - 在 Firefox 中对
insertHTML行为不一致，Safari 几乎不支持 - 真正可控的方式是：自己构造 DOM 节点 → 用
Range插入 → 手动聚焦目标元素
避免污染编辑器内容的 class 和 style
你插入的 HTML 很可能带内联样式或 class，但这些在后续渲染/导出时容易失控：
立即学习“前端免费学习笔记（深入）”；
- 不要直接插入
style="color: red; font-size: 14px;"—— 应该走编辑器预设的样式体系（比如统一用class="text-red"+ 外部 CSS 控制） - 如果插入的是组件（如「提示框」「代码块」），务必包裹在语义化容器里，例如
<div class="editor-callout">...，并确保该 class 不会被编辑器默认样式覆盖 - 插入后立即调用
editorElement.normalize()合并相邻文本节点，防止后续innerHTML获取时出现意外换行或空格
真正难的不是“怎么插”，而是“插完之后光标在哪、样式是否隔离、后续编辑是否破坏结构、导出时能否还原”——这些细节没处理好，按钮看起来能点，实际一用就崩。
