最简单但有坑的做法是依赖浏览器原生Tab/粘贴生成表格，真正可控的是手动生成HTML字符串并用range.insertNode()精准插入；Vue/React中应语义化建模表格数据而非直接操作DOM；iOS需降级为扁平contenteditable块。
contentEditable 里直接插入表格最简单但有坑
浏览器原生支持在 contentEditable 区域里按 Tab 或粘贴生成表格，但实际项目中几乎不能靠它——用户不会自己 Tab，粘贴的表格样式丢失、行列错乱、<table> 结构不规范（比如缺 <code><tbody>），而且 Safari 对 <code>document.execCommand 的表格命令已废弃。
真正可控的做法是手动生成 HTML 字符串并插入光标位置。关键不是“怎么画表格”，而是“怎么插得准、不崩内容”：
- 必须先用
window.getSelection()获取当前光标位置，再用range.insertNode()插入新节点，不能直接innerHTML += - 插入前要检查光标是否在
contentEditable内部，否则range可能为空或跨出边界 - 表格默认不含样式，
<td> 宽度会塌缩，建议至少加 <code>style="border:1px solid #ccc; padding:4px;" - 不要用
document.write或document.body.innerHTML操作，会清空整个页面 - 用户无法编辑单元格内容（除非再设
contenteditable="true"到<td>） <li>键盘方向键在表格边缘容易跳出去，焦点管理变复杂</li> <li> <code>execCommand返回布尔值不可靠，失败时无提示，需额外校验 DOM 是否插入成功
用 insertHTML 兼容老项目但注意 Chrome 的限制
如果项目还在用 document.execCommand('insertHTML', false, htmlStr)，它在旧版 Edge 和 IE 中可用，但 Chrome 89+ 已禁用该命令对 <table> 的支持——插入后表格会变成纯文本或被过滤掉。
<p>绕过方法是把表格包裹一层 <code><span contenteditable="false"></span>，但副作用明显：
立即学习“前端免费学习笔记（深入）”；
示例安全写法：
const tableHtml = '<table style="border-collapse:collapse;"><tbody><tr><td style="border:1px solid #ccc;padding:4px;"><br></td></tr></tbody></table>';然后用
range.deleteContents() 清空选区再 range.insertNode() 插入。
Vue/React 项目别直接操作 DOM 插表格
在响应式框架里硬插原生 DOM 表格，会导致视图和状态不同步：表格数据没进 data 或 state，后续删行、合并单元格、导出 Excel 都没法做。
正确路径是“语义化建模 + 渲染驱动”：
- 定义表格数据结构，例如：
tableData = [{row: [{colSpan: 1, content: 'A1'}, ...]}, ...] - 用
v-for或{tableData.map(...)}渲染，而非拼接 HTML 字符串 - 点击“插入表格”按钮只更新
tableData，让框架自动 diff 和 patch - 如需富文本能力（比如单元格内加粗、链接），每个
<td> 内嵌一个小型 <code>contentEditable区域，单独管理其 HTML移动端 iOS 上表格输入体验极差，得降级
iOS Safari 对
contentEditable表格的支持几乎是残废：双击无法选中单元格、长按菜单不出现“复制/粘贴”、软键盘弹起后光标定位偏移。实测在 iPad 上连<input>都比<td contenteditable> 可靠。 <p>应对策略不是硬扛，而是识别设备后主动降级：</p> <ul> <li>用 <code>navigator.userAgent.includes('iPad') || /iPhone/.test(navigator.userAgent)判断 - 降级为“表格模板按钮组”：点“2×3 表格”就插入 6 个带编号的
<div contenteditable> 块，视觉排成网格，但 DOM 是扁平的 <li>禁止在 iOS 上触发原生表格命令，避免白屏或卡死</li> <p>这个点最容易被忽略——开发时在桌面 Chrome 测试完美，上线后 iOS 用户根本输不了字。</p> </div>
