Cómo evitar el contenido de WebKit Copiar y pegar editable que da como resultado un CSS no deseado?

Question

Tengo un <div> que tiene contentEditable="true".

Cuando copie y pegue contenido dentro del divisor de datos editable, el texto pegado queda envuelto en una gran cantidad de CSS no deseados.

Por ejemplo, esto: <p>text text</p> se convierte en:

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

entiendo el navegador (Google Chrome en el caso actual) trata de ser inteligente y todo, pero lo termino es completamente irrelevante y no deseados CSS.

¿Hay alguna manera de decirle al buscador basado en WebKit no para generar esto?

Answer 1

Tuve el mismo problema, más el problema de que cada navegador crea HTML diferente. Así que escribí un puerto de JavaScript de la biblioteca Sanitize: Sanitize.js

Sanitize.js es un sanitizador de HTML basado en una lista blanca escrito en JavaScript. Dada una lista de elementos y atributos aceptables, Sanitize.js eliminará todo el HTML inaceptable de un nodo DOM.

Eche un vistazo al ejemplo, donde capturo el evento paste y luego proceso el HTML.