必须为表格单元格显式添加 tabindex="0" 才能获得键盘聚焦能力，仅 contenteditable="true" 不足；父级 contenteditable="false"、user-select: none 或 pointer-events: none 会覆盖子元素设置；原生 contenteditable 在 td 中行为不可控，推荐双击时动态插入 input 元素实现可靠编辑。

contenteditable="true"加在上为什么点不动

因为表格单元格默认不在 Tab 链中，contenteditable="true"本身不赋予键盘聚焦能力。鼠标能点进、输字，但 Tab 切换失效，input.focus() 无效，快捷键（如 Ctrl+B）也不响应——除非显式加 tabindex="0"。

还要检查有没有被父级“静音”：<table contenteditable="false"> 或 <code><tr style="user-select: none"> 会直接覆盖子元素的 <code>true；pointer-events: none 更是让点击彻底无反应。

• 必须写 tabindex="0"，不能只靠 contenteditable
• 父容器不能设 contenteditable="false"（就近 false 优先）
• CSS 中禁用 user-select: none 和 pointer-events: none
• 移动端需额外加 min-width/min-height，避免光标定位失败

Enter/Tab/粘贴行为为什么不可控

浏览器对 <td> 的 <code>contenteditable 没有统一语义约定：Chrome 回车插 <div>，Firefox 插 <code><br>，Safari 可能插 <p></p>；Tab 键常卡死或跳到地址栏；粘贴 Word 表格会嵌套出多层 <div><table><tr><td>，污染 DOM 结构。 <p>这不是 bug，是设计使然——<code>contenteditable 是富文本引擎开关，不是“输入框”。表格单元格天然缺乏编辑上下文支持。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须监听 keydown，对 Enter 调用 event.preventDefault()，否则默认换行
• 粘贴时拦截 paste，用 event.clipboardData.getData('text/plain') 提纯文本
• 别依赖 execCommand（已废弃），也别用 innerHTML 直接存值，防止 XSS 或空标签残留
• Tab 行为无法可靠接管，建议放弃键盘导航预期，改用显式操作

为什么“点击编辑”不能靠contenteditable原生实现

“点击才激活编辑”和“始终可编辑”是两回事。contenteditable="true" 让 <td> 一加载就处于编辑态，用户还没点就可能乱输，且无法控制焦点样式、输入类型（比如数字列拦不住字母）、长度限制（<code>maxlength 不生效）。

真实需求是状态切换：展示态 → 点击/双击 → 编辑态（带聚焦、全选、校验）→ Enter/Escape/blur → 恢复展示态并同步数据。这需要手动管理生命周期，而非依赖属性开关。

• 初始状态应移除 contenteditable，只保留纯文本
• 点击时动态加 contenteditable="true" + tabindex="0" + .focus()
• 用 cell.dataset.originalValue = cell.textContent 存原始值，用于 Escape 还原
• blur 时必须比对新旧值，仅当变化才触发保存逻辑，否则清空属性回归展示态

移动端和框架场景下最稳的替代方案

iOS Safari 对 <td contenteditable> 支持极弱：长按无响应、软键盘弹出后光标错位、<code>touchstart 后 focus() 常失败。React/Vue 用户更危险——只改 DOM 不触发状态更新，后续 re-render 会把编辑内容冲掉。

目前唯一能兼顾兼容性、语义清晰、字段校验、无障碍和框架集成的方案，是双击（或长按/编辑按钮）时动态插入 <input>，严格绑定三个事件收口。

• 监听 dblclick（桌面端），移动端用 touchstart + setTimeout(300ms) 模拟长按
• 插入 <input type="text"> 前先存 dataset.originalValue，清空 cell.innerHTML
• 设置 style="width:100%; height:100%; margin:0; padding:4px;" 并立即 input.focus()、input.select()
• Enter/Escape/blur 必须统一处理：Enter 校验后更新内存数据源，Escape 仅还原 DOM，blur 视业务定为确认或取消
• 所有修改必须同步二维数组或 React state/Vue ref，不能只改 <td> 文本 <p>真正难的不是“怎么让单元格变可编辑”，而是“怎么让编辑过程不丢数据、不崩结构、不绕过校验、不破坏语义”。<code>contenteditable 在 <td> 里不是捷径，是埋雷区；可控性永远来自主动创建控件，而不是被动开启编辑。</td>