X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Свои кнопки редактора TinyMCE не отображаются в блоках редактора Gutenberg

Приклад
  • 2024-04-26
  • 1818 переглядів

  • Дизайн та розробка сайту

Доброго времени суток

На моем сайте еще нет статьи о том как добавить свои кнопки в редактор TinyMCE, это старый редактор что был до Gutenberg и 5 версии WordPress. Но, в Gutenberg есть блоки с классическим редактором TinyMCE. Если вы ранее, еще в классическом редакторе TinyMCE до появления Gutenberg, добавили свои кнопки, то в в TinyMCE от Gutenberg они не будут работать, они просто там не появляются.

TinyMCE

В этой статье мы разберемся как это исправить, к тому же это делается очень легко. Предупреждаю сразу, это статья рассчитана для тех кто в работе с кодом на "ТЫ", кто WordPress знает очень хорошо и ее функции вы увидели не вчера. Если это не так, то эта статья не для вас. Тут нет пошаговой инструкции как внедрить свои кнопки в редактор, тут подсказка как решить проблему для людей, которые понимают в этом. Я пишу это, чтобы потом не было в комментариях и на почти гневных петиций, что добавил код неизвестно куда, просто скопировал а оно не работает. Код с статьи копировать не нужно, его нужно взять и переделать под свой сайт.

И так, если вы ранее добавляли в тему свои кнопки в редактор TinyMCE, а они не отображаются, хотя ранее все было ок, но теперь в Gutenberg при добавлении классического параграфа, кнопок нет в нем то вам нужно найти в коде тех функций что вы добавляли ранее примерно, повторяю "ПРИМЕРНО" такой код, он у вас будет 100% другим но похожим.

// В этом функции указываем ссылку на JavaScript-файл кнопки
function my_add_tinymce_script( $plugin_array ) {
	$plugin_array['my_mce_button'] = get_stylesheet_directory_uri() .'/js/short_button.js';
	return $plugin_array;
}
 
// Регистрируем кнопку в редакторе
function my_register_mce_button( $buttons ) {
	array_push( $buttons, 'my_mce_button' );
	return $buttons;
}


function my_add_mce_button() {
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'my_add_tinymce_script' );
		add_filter( 'mce_buttons', 'my_register_mce_button' );
	}
}

// В этом событии запускаем наши функции
add_action('admin_head', 'my_add_mce_button');

В коде у вас будет 2 функции основные. В одной у вас подключается файл, в котором скрипт с настройками кнопки для TinyMCE. У вас там будет свой путь к файлу и свое название и файла и функции, главное это суть. Вторая функция, что регистрирует саму кнопку для редактора TinyMCE. Далее, идет третья функция в которой идет проверка на пользователя и прикрепление предыдущих двух функций к хукам. Кстати, проверка на пользователя может отсутствовать и только присутствовать хуки. И самое главное это то, что данная третья функция вызывается событием:

add_action('admin_head', 'my_add_mce_button');

Данное событие, как вам известно запускает функцию только на стороне администратора, то бишь в админке. Событие загружается при загрузке страницы и в классическом редакторе как было раньше - это работает, да и сейчас, если редактор загружается сразу - это работает, например у вас TinyMCE редактор используется где-то на страницах настроек. Почему же это не работает в Gutenberg? Дело в том, что в нем - TinyMCE редактор в классическом параграфе, грузится немного позже, поэтому событие не срабатывает для него, а только для того TinyMCE, что встроен в WordPress.

Решение задачи очень простое, вместо вызова события в админке при загрузки страницы, которое срабатывает для WordPress, нужно вызывать его при инициализации уже плагина Gutenberg, то бишь немного позже, когда WordPress полностью загружен, но до того, как любые header заголовки были отправлены. В этом помогает событие - init.

Просто скопируйте строчку с событием admin_head и дублируйте ее только сам admin_head замените на init. В моем случаи это выглядит так:

add_action( 'init', 'my_add_mce_button');

У вас будет похоже, но вешаться на событие будет своя функция. По сути у вас все останется как и раньше, просто будет теперь два вызова события add_action.

//Пример
add_action('admin_head', 'my_add_mce_button');
add_action( 'init', 'my_add_mce_button');

Надеюсь, что вам помогла данная статья. Данная проблема возникла кода-то у меня, недавно повторилась у одного из читателей моего сайта. Решил опубликовать этот материал, как подсказку для тех, у кого, вдруг, тоже возникнут проблемы.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 6, в среднем: 5 из 5
Читайте також