💡 Совет

Удаление стилей в contenteditable при вставке

20.11.2019 1 минута чтения

В 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);
Экспертное мнение Алексей

В веб-разработке с 2012 года. Специализируюсь на PHP, JavaScript и архитектуре высоконагруженных проектов. Автор статей по оптимизации, API и базам данных.

Все статьи автора →
Telegram VK Twitter
Читайте также
Изменение URL без перезагрузки страницы
Изменение URL без перезагрузки страницы
С развитием WEB понятие о странице немного изменилось. Для конечного пользователя улучшением производительности и комфорта http://Komfort-v-dome24.ru путешествия по сайту, для...
Полезные запросы в MySQL
Полезные запросы в MySQL
В этой статье собраны некоторые, на мой взгляд, интересные и полезные запросы в MySQL. Список будет пополняться в будущем. Выбор...
Code style. Выравнивание массива в PhpStorm
Code style. Выравнивание массива в PhpStorm
Важным критерием качества кода является его читаемость, так называемая некомпьютерная красота. Код может быть красивым в плане использования алгоритма, в...