如何在复制contentEditable内容时仅保留纯文本、清除内联样式及标签属性

核心原理 #

浏览器默认执行复制操作时，会往剪贴板同时写入text/plain（纯文本）和text/html（带格式的富文本）两类数据。富文本编辑器（如Gmail编辑框）会优先读取text/html格式内容，因此会保留原样式。我们只需拦截复制事件，仅往剪贴板写入纯文本格式数据即可实现需求。

实现代码 #

HTML 结构示例 #

<div contenteditable="true" id="yourEditableDiv">
  <!-- 你的带内联样式的内容 -->
  <span class="underline" 
   id="id-1" 
   style="box-shadow: white 0px 0px 0px 0px inset, rgb(1, 2, 3) 0px -2px 0px 0px inset; background-color: transparent;"
  >This is an example.</span>
</div>

JS 事件监听代码 #

const editableEle = document.getElementById('yourEditableDiv');

editableEle.addEventListener('copy', (e) => {
  // 阻止默认复制行为，避免自动写入富文本格式
  e.preventDefault();
  // 获取用户选中的纯文本内容
  const selectedText = window.getSelection().toString();
  // 仅向剪贴板写入纯文本格式数据
  if (e.clipboardData) {
    e.clipboardData.setData('text/plain', selectedText);
    return;
  }
  // 兼容低版本IE的兜底逻辑
  window.clipboardData.setData('Text', selectedText);
});

补充说明 #

你提到的document.execCommand方案已被Web标准废弃，现代浏览器虽然暂留兼容但随时可能移除，不建议使用。上述方案基于标准Clipboard API实现，兼容所有主流浏览器，测试时复制内容到Gmail等富文本编辑器时只会得到纯文本，不会携带任何样式和标签。

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