Entfernen Sie die Formatierung von einem contentEditable div

Ich habe eine contentEditable Div, und ich wollen, entfernen Sie alle Formatierungen, die besonders für das kopieren und einfügen von text.

InformationsquelleAutor der Frage Garth Humphreys | 2011-08-01

Haben Sie versucht, mit innerText?

HINZUGEFÜGT:

Wenn Sie wollen, um Streifen markup und Inhalt einfügen in die editierbaren div, versuchen die alten hack der Erstellung einer 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>

InformationsquelleAutor der Antwort Sam Dutton

document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
    });

Ist es einfach: fügen Sie einen listener hinzu, um die "einfügen" - event und reeformat Inhalt der Zwischenablage.

Hier noch ein Beispiel für alle Container im Körper:

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

Saludos.

InformationsquelleAutor der Antwort Isaac Limón

War auf der Suche nach Antwort auf diese für Alter und landete beim schreiben meines eigenen.

Ich hoffe, das hilft anderen. Zum Zeitpunkt der Abfassung dieses, es scheint zu funktionieren in ie9, neueste chrome und firefox.

<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>

InformationsquelleAutor der Antwort Daniel - SDS Group

2

Mit Jquery können Sie .text() Methode, so dass, wenn blur zum Beispiel, können Sie ersetzen Sie den Inhalt mit der text-Inhalt
```
$("#element").blur(function(e) {
    $(this).html($(this).text());
});
```
InformationsquelleAutor der Antwort Justo
1

Ich weiß, es ist schon eine Weile her, aber ich hatte das gleiche problem. Auf meinen Fall, es ist eine GWT-Anwendung zu machen, noch schlimmer.
Jedenfalls ist das problem behoben mit:
```
var clearText = event.clipboardData.getData('text/plain');
document.execCommand('inserttext', false, clearText);
```
Finden Sie unter: https://jsfiddle.net/erikwoods/Ee3yC/

Ich bevorzugt "inserttext" - Befehl anstelle des "insertHTML", weil die Dokumentation sagt, dass es genau zum einfügen von plain-text, also scheint mehr geeignet.
Sehen https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

InformationsquelleAutor der Antwort Robson Hermes
0

Können Sie nicht Zugriff auf die system-Zwischenablage, so müssen Sie einen hack. Siehe diese Frage: JavaScript get-Daten in der Zwischenablage auf einfügen-event (Cross-browser)

InformationsquelleAutor der Antwort Tim Down

Ich möchte noch hinzufügen, dass meine Lösung für dieses Problem:

ContentEditableElement.addEventListener('input', function(ev) {
  if(ev.target.innerHTML != ev.target.textContent) {

    //determine position of the text caret
    var caretPos = 0,
      sel, range;
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      var children = ev.target.childNodes;
      var keepLooping = true;
      for(let i = 0; keepLooping; i++) {
        if(children[i] == range.commonAncestorContainer || children[i] == range.commonAncestorContainer.parentNode) {
          caretPos += range.endOffset;
          keepLooping = false;
        } else {
          caretPos += children[i].textContent.length;
        }
      }

      //set the element's innerHTML to its textContent
      ev.target.innerHTML = ev.target.textContent;

      //put the caret where it was before
      range = document.createRange();
      range.setStart(ev.target.childNodes[0], caretPos);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }
});

(das ist nicht kompatibel mit älteren Versionen von IE)

InformationsquelleAutor der Antwort Airhogs777

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.