Come evitare il contenuto di WebKit copia-incollabile con conseguente CSS indesiderato?

Question

Ho un <div> che ha contentEditable="true".

Quando I copia-incolla il contenuto all'interno del divisore modificabile, il testo incollato viene inserito in un sacco di CSS indesiderati.

Ad esempio, questo: <p>text text</p> diventa:

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

Capisco il browser (Google Chrome nel caso attuale) cerca di essere intelligente e tutto, ma quello che io alla fine è del tutto irrilevante e non voluto CSS.

C'è un modo per dire al browser basato su WebKit non per generare questo?

Answer 1

Ho avuto lo stesso problema, oltre al problema che ogni browser crea HTML diversi. Così ho scritto una porta JavaScript della libreria Sanitize: Sanitize.js

Sanitize.js è un disinfettante HTML basato su whitelist scritto in JavaScript. Dato un elenco di elementi e attributi accettabili, Sanitize.js rimuoverà tutto l'HTML inaccettabile da un nodo DOM.

Dai un'occhiata all'esempio, dove acquisisco l'evento paste ed elaboriamo il codice HTML in seguito.