Question

我目前有一个内容可编辑的div，我将其用作编辑器，但我希望在粘贴时删除html（不包括<br>标签）。

目前我还有另一个div <div class="hiddendiv common editor"></div>，它会收集添加到contenteditable div的所有文字和数据，以确定可信任div的高度。

我变得困惑，不确定我将如何做到这一点。

我的问题是：如何在使用jQuery粘贴时在光标插入处插入文本时删除html格式（不包括<br>标记）？

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());

});

Answer 1

这可能是您想要的：

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

从contenteditable div中删除HTML格式，但在粘贴时保留换行符？

1 个答案: