contenteditable实现轻量级富文本编辑与格式控制

• 务必添加 tabindex="0"：这个属性是关键，否则不仅键盘Tab键无法导航到该元素，连JavaScript调用 .focus() 方法也会失效。
• 设置视觉样式：建议给编辑区域设置一个 min-height 和边框（比如 border: 1px solid #ddd）。这样即使内容为空，用户也能清晰地看到编辑区域的范围，避免“隐身”的尴尬。
• 控制回车行为：默认情况下，在 contenteditable 区域按回车会生成一个
  。如果你希望生成更标准的段落，可以监听 keydown 事件，拦截Enter键，然后手动执行 document.execCommand('insertParagraph')，或者直接插入

  
  

  这样的HTML结构。

格式控制优先使用 execCommand（兼容性好，足够实用）

说到格式控制，document.execCommand() 这个API虽然已被官方标记为“废弃”，但现实是，所有主流浏览器至今仍完整支持它。对于实现加粗、斜体、列表对齐等基础富文本功能，它足够稳定，而且代码极其简洁。

• 命令绑定：为你的“加粗”“斜体”按钮设置自定义属性，例如 B。
• 执行命令：点击按钮时，获取命令名，调用 document.execCommand(cmd, false, value)。这里的 value 参数对于设置颜色、插入链接或图片地址时是必需的。
• 常用命令清单："bold"（加粗）、"italic"（斜体）、"underline"（下划线）、"insertUnorderedList"（无序列表）、"justifyCenter"（居中）、"foreColor"（文字颜色）、"createLink"（创建链接）、"insertImage"（插入图片）。
• 保持焦点：执行完格式命令后，记得再调用一次 editor.focus()，确保光标能回到编辑区内，让用户可以继续输入。

粘贴与内容清理不可跳过

这是实现一个健壮编辑器的关键一步，绝不能省略。用户很可能从Word文档或其他网页复制内容过来，这些内容往往携带大量冗余的内联样式、复杂嵌套标签，甚至可能包含脚本代码。如果直接粘贴进去，不仅会导致页面渲染错乱，更可能引入XSS安全风险。

• 拦截默认粘贴：监听编辑区域的 paste 事件，并调用 e.preventDefault() 阻止浏览器的默认粘贴行为。
• 获取并插入纯文本：从事件对象中通过 e.clipboardData.getData('text/plain') 获取剪贴板中的纯文本。然后，使用 execCommand('insertText', false, text) 将干净的文本插入到光标处。
• 选择性保留格式：如果你希望保留一些基础格式（如段落、加粗），可以获取HTML内容（'text/html'），然后使用像DOMPurify这样的安全库进行过滤。例如：DOMPurify.sanitize(html, {ALLOWED_TAGS: ['b','i','u','p','br']})，只允许保留指定的安全标签。
• 处理空状态：当用户清空所有内容后，编辑区可能会塌陷并失去焦点。一个常见的做法是，在内容为空时，自动插入一个包含
标签的空段落（如

  
  

  ）作为占位符。

获取与保存内容需区分 innerHTML 和 textContent

最后，当用户编辑完成，你需要将内容保存起来。这里容易踩坑：直接取 innerHTML 就发给后端？里面可能包含不安全的代码。只取 textContent？那所有格式都丢失了。

• 按用途选择：用于前端回显或预览时，可以使用 innerHTML（但服务端或保存前必须再次进行安全过滤）。用于生成纯文本摘要、搜索索引时，则应使用 textContent。
• 保存前的清洗：在将内容持久化（如发送到服务器）之前，建议做一次最小化的清洗。移除所有 style（样式）、非必要的 class（类名）以及各种 data-* 属性。只保留你明确允许的语义化标签，例如 、、

  、

  /
  • 等。
  • 保存时机：通过监听 input 或 blur（失去焦点）事件来触发保存逻辑。注意，input 事件触发非常频繁，可能需要配合防抖（debounce）技术来避免性能问题。

  遵循以上几点，你就能用最少的代码，构建出一个体验尚可、安全可控的轻量级网页富文本编辑功能了。对于后台管理系统、简单的评论框等场景，这套方案依然非常实用。