Удаление стилей в contenteditable при вставке
30 ноября 2013 HTML5 7 комментариев 10654 просмотра
В 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);
Фидл
7 комментариев

В принципе, насколько я знаю, сейчас пошла тенденция писать визивигн редакторы на contenteditable одним из наиболее превлекательных, но увы платных является redaktor от imperavi.

Ого, он уже contenteditable? Раньше не был, и бесплатным был.

По моему, он и был contenteditable. Хотя что-то утверждать не возьмусь. Опять же я просто глянул их исходник и там вроде есть этот contenteditable... может как-то еще страхуются, не знаю. И да, был бесплатный, а теперь вот так...

KD

Нытьё о платности тяжелых и бестолковых редакторов (мегабайты кода + сложное API + доки не русские).

Я вот взял этот редактор: tifftiff.de/contenteditable/editor.html И прикрутил его к шаблону сайта. Теперь можно редактировать прямо на странице.

Суть редактора такова:

#
Что-то никак не соображу, как прикрутить ваш код к своему DIV'у.

Хреново я знаю JS... Проведите разок напильником.

@KD, всё должно работать, заменив editable на editor (ваш ID) в моем JS.

ND

На fild'е убедился что работает.

С редактором http://tifftiff.de/contenteditable/editor.html не хочет

Тот редактор на фреймворке Prototype сделан, но с чистым JS вроде не конфликтует.

Замена editable на editor не помогла - из Word'а вставляется с форматированием. Пока спасаюсь тем, что в FireFox есть горяченькие Ctrl+Shift+V (вставить как текст).

@ND а у меня Ctrl+Shifv+V в firefox вызывает "Элементы открытой страницы" %-)