Konvertieren von HTML in nur-text in contentEditable

Ich habe eine contentEditable und ich Streifen die Formatierung der eingefügten Inhalte on('paste') durch den Fang der Falle. Dann habe ich den Fokus auf eine textarea, fügen Sie den Inhalt dort, und kopieren Sie den Wert. So ziemlich die Antwort von hier. Das problem ist, dass ich dies nicht tun:

$("#paste-output").text($("#area").val());

da ersetzen würde meine gesamten Inhalte mit dem eingefügten text. Also muss ich die Inhalte einfügen an Cursor-position. Ich habe ein script, das das tut:

pasteHtmlAtCaret($("#area").val());

//pastes CTRL+V content at caret position
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);
  }
}

Das problem ist nur, dass es Pasten, die HTML-Inhalte, auf die caret-position mit der html variable. Wie kann ich das transformieren, die in nur-text? Ich versucht, indem die jQuery .text(html) auf variable ohne Glück. So etwas könnte helfen:

el.textContent||el.innerText;

Irgendwelche Ideen oder eine bessere Lösung? Danke!

EDIT:
Vielen Dank für die Antworten ich meine modifizierten code und das Problem gelöst. Ich im Grunde kopiert den Wert von textarea in eine div und packte nur seine .text():

//on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});

InformationsquelleAutor der Frage Alex | 2013-02-28

  1. 9
    1. Erstellen Sie eine externe div,
    2. Setzen Sie Ihr html in das div,
    3. Kopieren Sie den text aus, div
    4. Einfügen an der cursor-position.

    InformationsquelleAutor der Antwort Shehabic

  2. 2

    Ersetzen-tag-Lösung:

    http://jsfiddle.net/tomwan/cbp1u2cx/1/

    var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");

$plainText.on('paste', function (e) {
    window.setTimeout(function () {
        $plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
    }, 0);
});

$linkOnly.on('paste', function (e) {
    window.setTimeout(function () {
        $linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
    }, 0);
});

function replaceStyleAttr (str) {
    return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
        return b + 'style_replace' + d;
    });
}

function removeTagsExcludeA (str) {
    return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}

function removeAllTags (str) {
    return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}

    InformationsquelleAutor der Antwort TomWan

  3. 2

    Auf Wunsch von Jonathan Hobbs bin ich dieses posting als Antwort.
    Vielen Dank für die Antworten ich meine modifizierten code und das Problem gelöst. Ich im Grunde kopiert den Wert der textarea in ein div gepackt und nur seine .text():

    //on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
  setTimeout(function(){
    var text = $('<div>').html($("#area").val()).text();
    pasteHtmlAtCaret(text);
  }, 20);
});

    InformationsquelleAutor der Antwort Alex

  4. 1

    Die Lösung, die ich verwendet ist, um den innerText des Elements auf blur:

    $element.on('blur', () => this.innerText = this.innerText);

    Dieser hält die Leerzeichen, aber Streifen die Formatierung. Es kann funktionieren, akzeptabel in Ihrem Szenario als gut.

    InformationsquelleAutor der Antwort Sebazzz

Schreibe einen Kommentar