如何解决TS环境下contenteditable限制粘贴为纯文本时clipboardData不存在报错

错误原因 #

TypeScript 默认将 paste 事件的回调参数推导为通用 Event 类型，该类型本身未定义 clipboardData 属性，只有专属的 ClipboardEvent 接口才携带剪贴板相关属性，因此触发类型不存在的报错。

修复方案 #

给 paste 事件参数做显式的类型指定/断言即可，修正后的 TypeScript 代码如下：

window.onload = function(){
  const editableDiv = document.querySelector<HTMLDivElement>('#divId');
  editableDiv?.addEventListener('paste', (e: ClipboardEvent) => {
      e.preventDefault();
      // 可选链+兜底空字符串处理clipboardData为空的边界情况
      const text = e.clipboardData?.getData('text/plain') || '';
      console.log(text);
      document.execCommand('insertText', false, text);
  })
}

如果你不想使用已废弃的 execCommand 方法，可以改用 Selection API 实现文本插入，实现逻辑更现代：

window.onload = function(){
  const editableDiv = document.querySelector<HTMLDivElement>('#divId');
  editableDiv?.addEventListener('paste', (e: ClipboardEvent) => {
      e.preventDefault();
      const text = e.clipboardData?.getData('text/plain') || '';
      const selection = window.getSelection();
      if (!selection || selection.rangeCount === 0) return;
      const range = selection.getRangeAt(0);
      // 删掉选中的内容（如果有选中的话）
      range.deleteContents();
      // 插入纯文本节点
      range.insertNode(document.createTextNode(text));
      // 调整光标到插入内容的末尾
      range.collapse(false);
      selection.removeAllRanges();
      selection.addRange(range);
  })
}

你提供的 HTML 代码无需修改，可正常配合上述逻辑使用。

内容的提问来源于stack exchange，提问作者Roann