如何修复contenteditable div的默认粘贴行为（替代已废弃execCommand）

安全阿岳

2026-7-13

Contenteditable富文本粘贴纯文本的替代方案

关于execCommand的使用建议

虽然execCommand已被官方标记为废弃，但目前主流现代浏览器（Chrome、Firefox、Safari、Edge）仍对其核心功能保持支持。如果你的项目只需要兼容现代浏览器，短期用它来处理粘贴纯文本完全没问题，但从长期维护角度，更建议迁移到标准的Selection/Range API。

更优的兼容方案

方案1：用`insertText`替代`insertHTML`（最低成本过渡）

原方案用insertHTML插入纯文本其实没必要，换成insertText更贴合纯文本场景，还能避免HTML解析带来的嵌套问题，且insertText在浏览器中的支持比insertHTML更稳定：

editor.addEventListener("paste", function(e) {
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    // 直接插入纯文本，不会生成嵌套div/br
    document.execCommand("insertText", false, text);
});

方案2：使用Selection+Range API（无废弃依赖，长期推荐）

完全脱离execCommand，用标准DOM API实现文本插入，兼容性更好，也更可控：

editor.addEventListener("paste", function(e) {
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    
    const range = selection.getRangeAt(0);
    // 清空当前选区内容
    range.deleteContents();
    // 创建纯文本节点插入
    const textNode = document.createTextNode(text);
    range.insertNode(textNode);
    
    // 调整光标到文本末尾，保持编辑连贯性
    range.setStartAfter(textNode);
    range.setEndAfter(textNode);
    selection.removeAllRanges();
    selection.addRange(range);
});