Как избежать WebKit contentEditable copy-paste, приводящий к нежелательному CSS?

Question

У меня есть <div>, который имеет contentEditable="true".

Когда я Содержимое вставки скопированной копии в редактируемый div, вставляемый текст обернут во множество нежелательных CSS.

Например, это: <p>text text</p> становится:

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

Я понимаю, браузер (Google Chrome в данном случае) пытается быть умным и все, но то, что я в конечном итоге совершенно не имеет значения и нежелательные CSS.

Есть ли способ рассказать браузеру на базе WebKit не, чтобы сгенерировать это?

Answer 1

У меня была такая же проблема, плюс проблема, что каждый браузер создает разные HTML. Поэтому я написал порт JavaScript библиотеки Sanitize: Sanitize.js

Sanitize.js - это дезинфицирующее средство на основе HTML на белом фоне, написанное на JavaScript. Учитывая список приемлемых элементов и атрибутов, Sanitize.js удалит весь неприемлемый HTML с узла DOM.

Посмотрите пример, где я фиксирую событие paste и обрабатываю HTML-код впоследствии.