Вопрос или проблема
Нажатие кнопки “Очистить форматирование” на панели инструментов удаляет такие стили, как жирный и курсив, но оставляет списки и заголовки (h1, h2 и т. д.) без изменений. Есть ли способ включить все элементы при очистке форматирования содержимого? Я искал и искал, но не смог найти результаты, касающиеся того, что я хочу сделать.
В основном я использую поле WYSIWYG от Advanced Custom Fields, но также пробовал стандартный классический редактор WordPress. Я нашел один пост, который показывал использование атрибута removeformat_selector в инициализации TinyMCE, но это не работает. Вот что я попробовал: (используя подход ACF для настройки инициализации TinyMCE)
add_action( 'acf/input/admin_footer', function() {
?>
<script type="text/javascript">
( function( $ ) {
acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id, field ) {
mceInit['removeformat_selector'] = 'ul,li,b,strong,em,i,span,h1,h2,h3,h4,h5,h6,blockquote,pre,code';
return mceInit;
} );
} )( jQuery );
</script>
<?php
} );
Мне нужно ответить на свой собственный вопрос здесь. Я использовал атрибуты из TinyMCE v3, но нужно использовать формат v4. Вот что работает:
add_action( 'acf/input/admin_footer', function() {
?>
<script type="text/javascript">
( function( $ ) {
acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id, field ) {
mceInit['formats']['removeformat'] = [{ selector: 'h1,h2,h3,h4,h5,h6,ul,li,b,strong,em,i,span,blockquote,pre,code', remove: 'all', split : true, expand : false, block_expand: true, deep : true }];
return mceInit;
} );
} )( jQuery );
</script>
<?php
} );
.
Ответ или решение
Для решения проблемы с кнопкой "Clear Formatting" в TinyMCE, которая не удаляет списки и заголовки (h1, h2 и т.д.), важно понимать, как TinyMCE обрабатывает запросы на удаление форматирования. В этом контексте обсуждается ситуация, когда используемая версия TinyMCE не даёт желаемого результата при его интеграции в такие платформы, как Advanced Custom Fields (ACF) и WordPress Classic Editor.
Теория
TinyMCE – это широко используемый текстовый редактор, интегрируемый в веб-приложения для облегчения редактирования текста. В его функционал входят множество настроек, которые можно адаптировать под конкретные потребности. Кнопка "Clear Formatting" предназначена для удаления определённых стилей (например, жирный, курсив), но может не воздействовать на структурные элементы, такие как заголовки и списки, если это не указано явно.
Одной из причин данной проблемы может быть использование устаревших методов настройки. TinyMCE регулярно обновляется, и с каждой новой версией изменяются или расширяются способы конфигурации редактора. В этом случае проблема была в использовании атрибутов, соответствующих предыдущей версии TinyMCE, в то время как необходимо было применять новый синтаксис, введённый в последующей версии.
Пример
В представленном примере изначально использовался атрибут removeformat_selector, который указывает TinyMCE удалять некоторые типы элементов при очистке форматирования. Однако этот подход работал неэффективно из-за использования логики из предыдущей версии TinyMCE.
Корректный подход заключался в использовании актуального метода, где применяются новые правила форматов. В этом примере код изменён следующим образом:
add_action( 'acf/input/admin_footer', function() {
?>
<script type="text/javascript">
( function( $ ) {
acf.add_filter( 'wysiwyg_tinymce_settings', function( mceInit, id, field ) {
mceInit['formats']['removeformat'] = [{
selector: 'h1,h2,h3,h4,h5,h6,ul,li,b,strong,em,i,span,blockquote,pre,code',
remove: 'all',
split : true,
expand : false,
block_expand: true,
deep : true
}];
return mceInit;
} );
} )( jQuery );
</script>
<?php
} );В этом примере используются массивы и ключевые параметры, такие как remove, split, expand, block_expand и deep, которые контролируют степень удаления форматирования, включая удаление списков и заголовков.
Применение
Безусловно, для решения подобных проблем необходимо понимать изменения в структуре и функционале новых версий библиотек, таких как TinyMCE. В контексте интеграции с ACF или WordPress важно правильно и вовремя адаптировать ваш код.
- Регулярное обновление знаний: Следите за changelog’ами и документацией, чтобы быть в курсе изменений в функциональных библиотеках.
- Тестирование и адаптация: При возникновении проблемы проверить на тестовой среде актуальность используемых методов и функций.
- Работа с комьюнити: Для временного обходного решения проблема может быть решена с использованием советов и рекомендаций сообщества или поддержку разработчиков той или иной платформы.
Правильное понимание и применение новых возможностей API TinyMCE не только решает поставленную задачу, но и повышает качество и скорость разработки, обеспечивая совместимость и функциональную устойчивость вашего продукта.