如何利用contenteditable实现轻量级原始网页富文本编辑与格式控制

核心是contenteditable="true"配合execCommand实现轻量编辑：需加tabindex="0"确保聚焦，监听paste清理粘贴内容，用innerHTML保存带格式内容、textContent提取纯文本，回车默认插<div>可拦截改为<p><br></p>。

用 contenteditable 实现轻量级富文本编辑，核心是“原生属性 + 原生 API”，不依赖任何库。它不是模拟输入，而是让元素真正参与焦点、光标、剪贴板交互，所以加粗、换行、粘贴等行为天然可用。

基础可编辑区域必须配 tabindex 和样式

只写 <div contenteditable="true"></div> 是不够的。常见问题：键盘无法聚焦、回车插入 <div> 而非段落。

• 务必添加 tabindex="0"，否则 tab 键和 JS .focus() 失效
• 建议设 min-height 和边框（如 border: 1px solid #ddd），避免空内容时不可见
• 回车默认生成 <div>，若需语义化段落，可监听 keydown 拦截 Enter 并手动插入 <p><br></p>

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

document.execCommand() 虽已废弃，但目前所有主流浏览器仍完整支持，且对简单场景足够稳定、代码极简。

• 按钮绑定命令，例如：<button data-command="bold">B</button>
• 点击时执行：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) 插入
• 若需保留基础结构（如段落、加粗），可用 DOMPurify.sanitize(html, {ALLOWED_TAGS: ['b','i','u','p','br']}) 过滤后再插入
• 空内容时（如全选删除），建议插入一个带 <br> 的空段落，避免编辑区塌陷失焦

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

用户编辑后的内容，不能无脑取 innerHTML 就发给后端——它可能含不可信 HTML；也不能只取 textContent——会丢失所有格式。

• 显示/预览用 innerHTML（但必须服务端或前端二次过滤）
• 纯文本摘要、搜索索引用 textContent
• 保存前建议做最小清洗：移除 style 属性、class（除非你主动管理）、data- 属性；保留 <b>、<i>、<p>、<ul> 等语义标签
• 监听 input 或 blur 事件触发保存，避免高频触发影响性能