javascript - 停止在 contenteditable div 中粘贴 html 样式，只粘贴纯文本

Question

我正在使用一个 contenteditable div，当我试图粘贴带有样式的东西时，它应该只复制纯文本，但它也有样式，有没有人知道如何强制它转换为纯文本我贴一下或者谁有更好的解决方案

这是我的代码:

    <div contenteditable="true">   
      This text can be edited by the user. 
    </div>

Answer 1

当您粘贴丰富内容时，它会显示为丰富内容。因此，您需要捕获粘贴事件、阻止默认操作并从剪贴板读取文本。

var ce = document.querySelector('[contenteditable]')
ce.addEventListener('paste', function (e) {
  e.preventDefault()
  var text = e.clipboardData.getData('text/plain')
  document.execCommand('insertText', false, text)
})

  [contenteditable] {
    background-color: black;
    color: white;
    width: 400px;
    height: 200px;
  }

<div contenteditable="true"></div>

<div>
  <h1>Test content</h1>
  <p style="color:red">Copy <em>this</em> <u>underlined</u></p>
</div>