Удаление стилей в contenteditable при вставке
30 ноября 2013 HTML5 11029 просмотров
В HTML5 есть такой атрибут contenteditable, который позволяет изменять содержимое DOM элементов. Но, по-моему, он совсем еще не готов к использованию, хотя идея классная. Например, при копировании какого-то форматированного текста и вставке в contenteditable, остаются стили и форматирование. Естественно, почти всегда это является проблемой.

Первое, что пришло мне в голову - обрабатывать данные в событии onchange. Но, как оказалось, такого события нет в contenteditable-элементах.

Нам нужно обрабатывать содержимое только если изменяется DOM, а именно, если вставляются в него новые узлы. Нет смысла делать какую-то проверку при обычном вводе. В JS есть такое событие - DOMNodeInserted, которое срабатывает, когда вставляется узел в определенный фрагмент DOM. От этого и будем плясать.

Ну а для того, чтобы получить чистый текст оригинала, достаточно воспользоваться innerHTML. Код:
var editable = document.getElementById('editable');

function onChange() {
    editable.innerHTML = editable.innerText;
}

editable.addEventListener('DOMNodeInserted', onChange, false);
Фидл