如何去除从带contenteditable属性的div复制文本时的多余内联样式

浏览器默认对contenteditable元素的选中内容执行复制操作时，会自动将元素的计算样式全部注入为内联样式，导致剪贴板的HTML内容冗余。你可以通过自定义剪贴板写入逻辑（控制本编辑器复制出去的内容）或粘贴时预处理HTML（控制粘贴进编辑器的内容）两种方式实现需求，以下是具体实现：

方案1：复制时拦截处理（从源头控制输出内容） #

直接拦截copy事件，自己处理选中内容后写入剪贴板，避免多余样式生成：

<div contenteditable id="test" style="min-width:600px; min-height: 800px;"></div>

<script>
const editor = document.getElementById('test')
// 要保留的样式属性，填[]就是完全移除所有内联样式
const allowStyleProps = ['color']

editor.addEventListener('copy', (e) => {
  e.preventDefault()
  // 获取用户选中的内容
  const selection = window.getSelection()
  if (!selection.rangeCount) return

  // 克隆选中的DOM片段
  const range = selection.getRangeAt(0)
  const fragment = range.cloneContents()
  const tempContainer = document.createElement('div')
  tempContainer.appendChild(fragment)

  // 批量处理所有元素的style属性
  tempContainer.querySelectorAll('*').forEach(el => {
    if (!allowStyleProps.length) {
      // 完全移除style属性
      el.removeAttribute('style')
      return
    }
    // 仅保留指定的样式属性
    const newStyle = allowStyleProps.map(prop => `${prop}: ${el.style[prop]};`).join('')
    el.setAttribute('style', newStyle)
  })

  // 把处理后的内容写入剪贴板
  e.clipboardData.setData('text/html', tempContainer.innerHTML)
  // 同时写入纯文本，兼容不支持HTML粘贴的场景
  e.clipboardData.setData('text/plain', selection.toString())
})
</script>

方案2：粘贴时预处理（控制输入到编辑器的内容） #

如果不需要控制复制出去的内容，只需要粘贴到本编辑器的内容无多余样式，可以修改你现有的paste事件逻辑：

document.getElementById("test").addEventListener("paste", (e)=>{
  e.preventDefault()
  const rawHtml = e.clipboardData.getData("text/html")
  // 要保留的样式属性，填[]就是完全移除所有内联样式
  const allowStyleProps = []

  // 用DOMParser解析HTML，避免正则处理的隐患
  const parser = new DOMParser()
  const htmlDoc = parser.parseFromString(rawHtml, 'text/html')

  // 清洗所有元素的style属性
  htmlDoc.body.querySelectorAll('*').forEach(el => {
    if (!allowStyleProps.length) {
      el.removeAttribute('style')
      return
    }
    const newStyle = allowStyleProps.map(prop => `${prop}: ${el.style[prop]};`).join('')
    el.setAttribute('style', newStyle)
  })

  // 将清洗后的内容插入编辑器
  document.execCommand('insertHTML', false, htmlDoc.body.innerHTML)
})

效果验证 #

如果设置allowStyleProps = []，最终拿到的内容为<span>sdasdasdas</span>；如果设置allowStyleProps = ['color']，得到的内容为<span style="color: rgb(0, 0, 0);">sdasdasdas</span>，完全匹配需求。

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