Добавляем кнопку на панель редактора TinyMCE в WordPress

25 Мар 2023г. в 11:52

В данном уроке мы рассмотрим, как добавить кнопку на панель редактора TinyMCE в WordPress. Кнопка будет предназначена для вставки видео с YouTube. Такое дополнение упрощает процесс добавления материалов на сайт под управлением WordPress для тех авторов, которые плохо владеют HTML.

Кнопка будет добавлять короткий код в текст, который будет форматироваться в правильную ссылку. А ссылка будет обрабатываться плагином Shadowbox и ролик будет выводиться в лайтбоксе на странице материала при показе заметки.

Кнопка Youtube в WordPress TinyMCE

Все ниже перечисленные действия действительны для WordPress версии 2.5+ !

Начнем с добавления короткого кода. Так как плагин Shadowbox нуждается только в ссылке на ролик на YouTube для работы, то короткий код должен получить id ролика и преобразовать его в корректно отформатированную ссылку, вставляя необходимую разметку для плагина Shadowbox. В файл functions.php (или custom/custom_functions.php если вы используете Thesis), добавьте следующий код:

1
// Добавляем обработчик короткого кода для видео YouTube
2
function addYouTube($atts, $content = null) {
3
extract(shortcode_atts(array( "id" => '' ), $atts));
4
return '<p style="text-align:center"> \
5
<a href="http://www.youtube.com/v/'.$id.'"> \
6
<img src="http://img.youtube.com/vi/'.$id.'/0.jpg" width="400" height="300" class="aligncenter" /> \
7
<span>Смотреть видео</span></a></p>';
8
}
9
add_shortcode('youtube', 'addYouTube');
Данная вставка позволит использовать короткий код вида [youtube id="xxxxx"] в ваших заметках. Он будет преобразовываться в центрированный параграф, в котором будет содержаться изображение предварительного просмотра и ссылка на видео. Если вы используете плагин Shadowbox, или любой другой плагин, который обнаруживает и обрабатывает ссылки на YouTube, то нажатие на ссылке в вашей заметке загрузит видео и запустит его в специальном элементе без перехода со страницы заметки. А если такого плагина нет, то произойдет переход на страницу ролика на сайте YouTube. Изображение предварительного просмотра вытягивается непосредственно с сайта YouTube, и его размер немного изменяется с помощью HTML. В нашем примере картинка должна быть размером 400x300 для соответствия шаблону страницы. Вы можете получить сгенерированный на YouTube кадр, сформировав ссылку в виде: http://img.youtube.com/vi/[id_видеоролика]/0.jpg.

Теперь добавим кнопку в редактор. Вставим следующий код в файл functions.php или custom_functions.php. Он будет добавлять функцию, которая вставляет кнопку:

function add_youtube_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
add_filter('mce_buttons', 'register_youtube_button');
}
}

add_action('init', 'add_youtube_button');

Код сначала проверяет, что пользователь имеет права на редактирование. Затем выполняется проверка того, что редактор находится в режиме редактирования форматированного текста. После чего добавляется фильтры, которые выполняются во время загрузки редактора и когда загружаются кнопки. А вызов функции add_action устанавливает запуск нашего кода при загрузке страницы.

Вызываемые функции add_youtube_tinymce_plugin и register_youtube_button являются пользовательскими функциями, определяемыми ниже в том же файле:

1
function register_youtube_button($buttons) {
2
array_push($buttons, "|", "brettsyoutube");
3
return $buttons;
4
}
5

6
function add_youtube_tinymce_plugin($plugin_array) {
7
$plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
8
return $plugin_array;
9
}
Первая функция сообщает редактору, что нужно добавить разделитель и кнопку (в нашем примере кнопка имеет имя brettsyoutube) к массиву кнопок. Вторая функция описывает, что кнопка будет делать. В нашем примере она выполняет внешний JavaScript файл из каталога “custom”.

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

1
function my_refresh_mce($ver) {
2
$ver += 3;
3
return $ver;
4
}
5

6
add_filter( 'tiny_mce_version', 'my_refresh_mce');
Данный код выполняет перехват проверки версии и увеличивает текущий номер на 3. Это быстрый и грубый способ.

Теперь у нас есть все для нашего функционала, осталось только добавить необходимый для кнопки код Javascript. Вот содержимое файла editor_plugin.js:

(function() {
tinymce.create('tinymce.plugins.BrettsYouTube', {
init : function(ed, url) {
ed.addButton('brettsyoutube', {
title : 'brettsyoutube.youtube',
image : url+'/youtube.png',
onclick : function() {
idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
var vidId = prompt("Видео YouTube", "Введите id или адрес url вашего видео");
var m = idPattern.exec(vidId);
if (m != null && m != 'undefined')
ed.execCommand('mceInsertContent', false, '[youtube id="'+m[1]+'"]');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "Brett's YouTube Shortcode",
author : 'Brett Terpstra',
authorurl : 'http://brettterpstra.com/',
infourl : 'http://brettterpstra.com/',
version : "1.0"
};
}
});
tinymce.PluginManager.add('brettsyoutube', tinymce.plugins.BrettsYouTube);
})();
Данная функция инициализирует плагин, добавляет массив информации о плагине, а затем добавляет плагин в существующий список плагинов TinyMCE. Строки, которые содержат brettsyoutube ссылаются на предыдущие функции. Так что при изменении имени плагина, нужно установить соответствие в коде PHP и JavaScript.

Обратите внимание, что в нашем примере плагин ссылается на файл youtube.png , который расположен в той же директории, что и плагин. Это изображение кнопки. Используется картинка размером 20 х 20 px.

Теперь у нас есть кнопка в визуальном редакторе, которая делает жизнь несколько проще при вставке видео YouTube в материалы. Подобная функция может быть очень полезна на сайте клиента, который слабо владеет вопросами веб программирования.