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

【问题标题】：Stop pasting html style in a contenteditable div only paste the plain text停止在 contenteditable div 中粘贴 html 样式，只粘贴纯文本
【发布时间】：2019-11-22 01:20:14
【问题描述】：

我正在使用 contenteditable div，当我尝试粘贴带有样式的内容时，假设只复制纯文本，但它也有样式，有谁知道如何强制它转换为纯文本我粘贴它或任何人有更好的解决方案

这是我的代码：

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

【问题讨论】：

为什么不直接使用<input> 或<textarea> 呢？非传统输入上的contenteditable="true" 对可访问性来说很糟糕，而且它的跨浏览器支持也不是那么好。 Inputs 和 TextAreas 可以自定义很多。
确实...无法复制。你确定你粘贴了 text 看起来你粘贴了一大堆 HTML
@n8jadams 因为我希望它可以根据内容的长度自动调整大小，所以我不想使用滚动条。另外，我需要将占位符和文本垂直居中。两种方法都试过了，也许 contentditable 会更容易。
@Paulie_D 如果无法复制，您显然没有粘贴富文本。当您复制富文本或 html 并将其粘贴到 contenteditable 中时，会添加样式和元素。

标签： javascript css

【解决方案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>

【讨论】：

我认为应该是insertHTML而不是insertText，因为后者会将换行符转换为div。

【解决方案2】：

可以拦截“粘贴”事件，替换目标的内容。

/* Derrived from: https://stackoverflow.com/a/6035265/1762224 */
const onPastePlainText = (e) => {
  var pastedText = undefined;
  if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    pastedText = e.clipboardData.getData('text/plain');
  }
  e.target.textContent = pastedText;
  e.preventDefault();
  return false;
}

document.querySelector('.ediatable-div').addEventListener('paste', onPastePlainText);

.ediatable-div {
  border: 2px inset #EEE;
  height: 25vh;
}

/* Placeholder - Derrived from: https://stackoverflow.com/a/20300212/1762224 */
[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text);
  color: #AAA;
}

<div class="ediatable-div" contenteditable="true" data-text="Paste copied HTML here"></div>
<div>
  <p style="text-decoration:underline">Copy <strong>me</strong>, I have <em>style</em>!</p>
</div>

【讨论】：

这在字段中已经有一些文本的情况下不起作用。