Wie vermeidet man WebKit-InhaltEditable Copy-Paste führt zu unerwünschten CSS?

Question

Ich habe eine <div>, die contentEditable="true" hat.

Wenn ich Inhalt innerhalb der bearbeitbaren div kopieren und einfügen, wird der eingefügte Text in eine Menge unerwünschter CSS verpackt.

Zum Beispiel dieser: <p>text text</p> werden:

<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 17px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; background-position: initial initial; background-repeat: initial initial; ">text text</p> 

ich den Browser (Google Chrome im aktuellen Fall) zu verstehen versucht, klug und alle zu sein, aber was ich am Ende ist völlig irrelevant und unerwünschte CSS.

Gibt es eine Möglichkeit, dem WebKit-basierten Browser nicht mitzuteilen, dies zu generieren?

Answer 1

Ich hatte das gleiche Problem, plus das Problem, dass jeder Browser andere HTML erstellt. Also schrieb ich einen JavaScript-Port der Sanitize-Bibliothek: Sanitize.js

Sanitize.js ist eine Whitelist-basierte HTML-Desinfektionslösung in JavaScript geschrieben. Mit einer Liste akzeptabler Elemente und Attribute entfernt Sanitize.js alle nicht akzeptablen HTML-Inhalte von einem DOM-Knoten.

Schauen Sie sich das Beispiel an, in dem ich das Ereignis paste feststelle und den HTML-Code anschließend verarbeite.