Javascript 从contenteditable div中剥离HTML格式，但在粘贴时保留换行符？

我目前有一个内容可编辑的div，用作编辑器，但我希望在粘贴时剥离html（不包括

标记）

目前我有另一个div

这个div收集添加到

contenteditable

div的所有文本和数据，以确定contenteditable div的高度

我感到困惑，不确定我将如何做到这一点

我的问题是：如何在使用jQuery粘贴时在光标插入符号处插入文本时剥离html格式（不包括

标记）

HTML:

<div contenteditable='true' id="textarea" class="editor plain-box large-box textarea text common text-content-input quicksand color-dark-grey" data-text="Start typing..."></div>

<div class="hiddendiv common editor"></div> 

jQuery

function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);

      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteHTML(html);
  }
}

$('#textarea').on("paste", function() {
    var textarea = $('#textarea').html();
    var hidden_div = $('.hiddendiv').html(textarea);
    var plain_text = hidden_div.text();
    $('#textarea').pasteHtmlAtCaret(plain_text);
});

var txt = $('#textarea'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common editor');

$('body').append(hiddenDiv);

txt.on('keyup input propertychange', function () {

    content = $(this).html();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br>');

    $(this).css('height', hiddenDiv.height());

});

函数粘贴HtmlatCaret（html）{
var-sel，范围；
if（window.getSelection）{
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（document.selection&&document.selection.type！=“控制”）{
document.selection.createRange（）.pasteHTML（html）；
}
}
$（'#textarea'）。在（“粘贴”，函数（）上）{
var textarea=$（'#textarea'）.html（）；
var hidden_div=$（'.hiddendiv'）.html（textarea）；
var plain_text=hidden_div.text（）；
$（'#textarea'）。粘贴htmlatcaret（纯文本）；
});
var txt=$（“#textarea”），
hiddenDiv=$（document.createElement（'div'），
内容=空；
txt.addClass（'txtstuff'）；
addClass（'hiddenDiv公共编辑器'）；
$（'body'）.append（hiddenDiv）；
on（'keyup input property change'，function（）{
content=$（this.html（）；
内容=内容。替换（/\n/g，
）；
html（内容+“
”）；
$（this.css（'height'，hiddenDiv.height（））；
});

这可能就是您想要的：

<div contenteditable="plaintext-only" id="textarea" data-text="Start typing..."></div>

为什么需要第二个DIV来确定contenteditable DIV的高度？对不起，我想说的是，它处理的是添加标记。您需要担心的不仅仅是

元素，还有块元素（如

和

）所隐含的换行符。