如何清除向可编辑的(contenteditable)元素里粘贴的文本的标签和样式？

Question

从别的地方复制文本时连样式一块复制过来了，如何清除原本的标签和样式呢？

Answer 1

兼容ie11,edge,chrome,firefox,safari:

var element = document.createElement('div');
    element.contentEditable = true;
    element.addEventListener("paste", function (e){
        e.stopPropagation();
        e.preventDefault();
        var text = '', event = (e.originalEvent || e);
        if (event.clipboardData && event.clipboardData.getData) {
            text = event.clipboardData.getData('text/plain');
        } else if (window.clipboardData && window.clipboardData.getData) {
            text = window.clipboardData.getData('Text');
        }
        if (document.queryCommandSupported('insertText')) {
            document.execCommand('insertText', false, text);
        } else {
            document.execCommand('paste', false, text);
        }
    });

Answer 2

function textFormat (e) {
e.preventDefault()
var text
var clp = (e.originalEvent || e).clipboardData
if (clp === undefined || clp === null) {
  text = window.clipboardData.getData('text') || ''
  if (text !== '') {
    if (window.getSelection) {
      var newNode = document.createElement('span')
      newNode.innerHTML = text
      window.getSelection().getRangeAt(0).insertNode(newNode)
    } else {
      document.selection.createRange().pasteHTML(text)
    }
  }
} else {
  text = clp.getData('text/plain') || ''
  if (text !== '') {
    document.execCommand('insertText', false, text)
  }
}

}

  使用:
  document.getElementById('editArea').addEventListener('paste', function (e) {
    textFormat (e)
  })
  

Answer 3

参考：https://stackoverflow.com/que...
示例：（可能打不开）
http://jsfiddle.net/ch6yn/

下面是我自己写的示例：

<div id="editArea" contenteditable oninput="this.innerHTML = this.innerText">
</div>