Стили могут быть мощным инструментом веб-разработки, но бывают ситуации, когда вам может потребоваться удалить стили из контента. Если вы используете TinyMCE, популярный редактор WYSIWYG, вам может быть интересно, как этого добиться. В этой статье мы рассмотрим различные методы удаления стилей в TinyMCE, дополненные разговорными объяснениями и примерами кода.

Метод 1: разделение стилей с помощью обычного текста
Иногда все, что вам нужно, — это необработанный текст без каких-либо стилей. TinyMCE предоставляет встроенный плагин под названием «Вставить», который позволяет удалять стили из вставленного контента. Вы можете включить эту функцию, добавив следующий код в конфигурацию TinyMCE:

tinymce.init({
  plugins: 'paste',
  paste_as_text: true
});

При включении paste_as_textлюбой контент, вставленный в TinyMCE, будет лишен форматирования, оставив только простой текст.

Метод 2: удаление встроенных стилей
Если вы хотите удалить встроенные стили из существующего контента в TinyMCE, вы можете использовать плагин removeformat. Вот пример того, как вы можете настроить TinyMCE для удаления встроенных стилей:

tinymce.init({
  plugins: 'removeformat',
  toolbar: 'removeformat',
});

При такой конфигурации в TinyMCE будет добавлена ​​кнопка «Удалить форматирование» на панели инструментов. Пользователи могут выбрать контент, из которого они хотят удалить стили, и нажать кнопку, чтобы удалить все встроенные стили.

Метод 3: применение пользовательского сброса CSS
Другой подход к удалению стилей в TinyMCE — применение пользовательского сброса CSS. Вы можете определить файл CSS, который сбрасывает все стили к значениям по умолчанию, а затем загрузить его в TinyMCE. Вот пример:

tinymce.init({
  content_css: 'path/to/reset.css',
});

В файле reset.cssвы можете вернуть все стили в исходное состояние, эффективно удалив все существующие стили из содержимого.

Метод 4: используйте JavaScript для удаления стилей.
Если вам нужен больший контроль над удаляемыми стилями, вы можете использовать JavaScript для управления содержимым в TinyMCE. Вот пример того, как можно удалить все стили с помощью JavaScript:

var content = tinymce.activeEditor.getContent();
var div = document.createElement('div');
div.innerHTML = content;
var elements = div.querySelectorAll('*');
for (var i = 0; i < elements.length; i++) {
  elements[i].removeAttribute('style');
}
var cleanedContent = div.innerHTML;
tinymce.activeEditor.setContent(cleanedContent);

Этот код извлекает содержимое из редактора TinyMCE, создает временный элемент divдля управления содержимым, удаляет атрибут styleиз всех элементов, а затем устанавливает очищенный контент обратно в редактор.

Удаление стилей в TinyMCE — распространенное требование в веб-разработке. В этой статье мы рассмотрели несколько методов выполнения этой задачи: удаление стилей из простого текста, удаление встроенных стилей, применение пользовательского сброса CSS и использование JavaScript для удаления стилей. В зависимости от ваших конкретных потребностей вы можете выбрать метод, который подходит вам лучше всего. Следуя этим методам, вы сможете гарантировать, что ваш контент останется чистым и свободным от нежелательных стилей.