Как избежать копирования и вставки в WebKit contentEditable, что приводит к нежелательному CSS? - PullRequest
Новая
       17

Как избежать копирования и вставки в WebKit contentEditable, что приводит к нежелательному CSS?

7 голосов
/ 22 июля 2010

У меня есть <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 , а не , чтобы сгенерировать это?

1 Ответ

8 голосов
/ 31 августа 2010

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

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

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

...