Formatierung aus einem contentEditable div entfernen

Question 1

Ich habe ein contentEditable Div und möchte alle Formatierungen entfernen, insbesondere für das Kopieren und Einfügen von Text.

Question 2

Sie können dem „Paste“-Ereignis einen Listener hinzufügen und den Inhalt der Zwischenablage neu formatieren. So:

let editableDiv = document.querySelector('div[contenteditable="true"]');

editableDiv.addEventListener("paste", function(e) {
  e.preventDefault();
  var text = e.clipboardData.getData("text/plain");
  document.execCommand("insertHTML", false, text);
});

Hier ein weiteres Beispiel für alle Container im Body:

let allEditableDivs = document.querySelectorAll('div[contenteditable="true"]');

[].forEach.call(allEditableDivs, function (el) {
  el.addEventListener('paste', function(e) {
    e.preventDefault();
    var text = e.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, text);
  }, false);
}

Saludos.

Question 3

Hast du es mal mit InnerText versucht?

HINZUGEFÜGT:

Wenn Sie Markup von Inhalten entfernen möchten, die in das bearbeitbare Div eingefügt wurden, versuchen Sie es mit dem alten Hack zum Erstellen eines temporären Div – siehe Beispiel unten.

<!DOCTYPE html>
<html>

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Strip editable div markup</title>

  <script type="text/javascript">
    function strip(html) {
      var tempDiv = document.createElement("DIV");
      tempDiv.innerHTML = html;
      return tempDiv.innerText;
    }
  </script>
</head>

<body>
  <div id="editableDiv" contentEditable="true"></div>
  <input type="button" value="press" onclick="alert(strip(document.getElementById('editableDiv').innerText));" />
</body>

</html>

Question 4

Ich habe ewig nach einer Antwort darauf gesucht und am Ende meine eigene geschrieben.

Ich hoffe, das hilft anderen. Zum Zeitpunkt des Schreibens scheint es in ie9, dem neuesten Chrome und Firefox zu funktionieren.

<div contenteditable="true" onpaste="OnPaste_StripFormatting(this, event);" />

<script type="text/javascript">

    var _onPaste_StripFormatting_IEPaste = false;

    function OnPaste_StripFormatting(elem, e) {

        if (e.originalEvent && e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
            e.preventDefault();
            var text = e.originalEvent.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (e.clipboardData && e.clipboardData.getData) {
            e.preventDefault();
            var text = e.clipboardData.getData('text/plain');
            window.document.execCommand('insertText', false, text);
        }
        else if (window.clipboardData && window.clipboardData.getData) {
            // Stop stack overflow
            if (!_onPaste_StripFormatting_IEPaste) {
                _onPaste_StripFormatting_IEPaste = true;
                e.preventDefault();
                window.document.execCommand('ms-pasteTextOnly', false);
            }
            _onPaste_StripFormatting_IEPaste = false;
        }

    }

</script>

Question 5

Ich weiß, es ist eine Weile her, aber ich hatte das gleiche Problem. In meinem Fall ist es eine GWT-Anwendung, um es noch schlimmer zu machen. Habe das Problem jedenfalls gelöst mit:

var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);

Sehen: https://jsfiddle.net/erikwoods/Ee3yC/

Ich habe den Befehl “inserttext” anstelle von “insertHTML” bevorzugt, da die Dokumentation besagt, dass es genau zum Einfügen von reinem Text dient, also besser geeignet erscheint. Sehen https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Question 6

Versuchen <div id="editableDiv" contentEditable="plaintext-only"></div>

Question 7

Mit Jquery können Sie verwenden .Text() Methode, sodass Sie beispielsweise beim Weichzeichnen den Inhalt durch den Textinhalt ersetzen können

$("#element").blur(function(e) {
    $(this).html($(this).text());
});

Question 8

Sie können nicht auf die Zwischenablage des Systems zugreifen, also brauchen Sie einen Hack. Siehe diese Frage: JavaScript ruft Daten aus der Zwischenablage beim Einfügeereignis ab (browserübergreifend)