HTML中实现富文本编辑器的contenteditable基础使用与限制-html教程-PHP中文网

最常见原因是元素不可聚焦，需加tabindex="0"；其他失效情况包括父级contenteditable="false"、css禁用user-select/pointer-events、shadow dom未显式设置、内联元素如定位异常。

html中实现富文本编辑器的contenteditable基础使用与限制

contenteditable="true" 为什么加了却不能编辑

最常见的情况是元素不可聚焦：原生 <div> 或 <code><p></p> 没有默认焦点能力，必须加 tabindex="0" 才能被 focus() 调用或键盘 Tab 切入。另外，以下任一条件都会让 contenteditable="true" 失效：

父级设置了 contenteditable="false"（继承规则是“就近 false 优先”）
CSS 中存在 user-select: none、pointer-events: none 或 display: contents
元素在 Shadow DOM 内但未显式设置该属性
用了 <span></span> 或其他内联元素——光标定位异常，建议只用于 <div>、<code><section></section> 等块级容器
监听内容变更该用 input 还是 blur

用 input 事件。它在每次按键、粘贴、格式操作后立即触发，比 blur 更及时，适合实时保存或校验。

blur 只在失焦时触发，用户可能编辑完直接关页，内容就丢了。但要注意：input 不会捕获 document.execCommand 触发的格式变化（如加粗），因为 execCommand 不触发该事件——现代方案应避免依赖 execCommand，改用 Selection + Range 插入节点，这样才真正可控。

示例写法：
```
const el = document.getElementById('editor');
el.addEventListener('input', () => {
  console.log('纯文本：', el.textContent);
  console.log('HTML（需清洗）：', el.innerHTML);
});
```
粘贴富文本时 HTML 乱七八糟怎么处理

浏览器默认把 Word、微信、网页复制的内容原样塞进 DOM，带大量 style、嵌套 <span></span>、data- 属性甚至 <script></script> 标签残留。这不是 bug，是规范行为。

正确做法是拦截 paste，禁用默认行为，再手动解析并清洗：

html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载
- 调用 event.preventDefault()
- 用 event.clipboardData.getData('text/html') 拿原始 HTML 字符串（不是 'text/plain'，否则丢格式）
- 用 DOMParser 解析成文档片段，遍历节点做白名单过滤（只留 <p></p>、<strong></strong>、<em></em>、<ul></ul>、<br>）
- 删掉所有 style 属性和 class，避免污染样式体系
- 别用正则匹配 HTML 字符串——易漏、易错、不安全
如果业务只要纯文本，直接取 event.clipboardData.getData('text/plain')，跳过 HTML 解析环节更轻量。

为什么不能直接用 innerHTML 存储和回显

因为 innerHTML 是浏览器渲染后的结果，不是用户输入的语义表达。它会混入：
- 浏览器自动插入的空 <div> 或 <code><p></p>（不同浏览器换行行为不一致）
- 不可见的 <br>、零宽空格、
- 粘贴带进来的 data-spm、id、style 等非用户意图属性
- XSS 风险：若未经滤直接插入服务端或再次 innerHTML 渲染，可能执行恶意脚本