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

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

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

Кнопка Youtube в WordPress TinyMCE

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

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

// Добавляем обработчик короткого кода для видео YouTube
function addYouTube($atts, $content = null) {
        extract(shortcode_atts(array( "id" => '' ), $atts));
        return '<p style="text-align:center"> \
        <a href="http://www.youtube.com/v/'.$id.'"> \
        <img src="http://img.youtube.com/vi/'.$id.'/0.jpg" width="400" height="300" class="aligncenter" /> \
        <span>Смотреть видео</span></a></p>';
}
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 являются пользовательскими функциями, определяемыми ниже в том же файле:

function register_youtube_button($buttons) {
   array_push($buttons, "|", "brettsyoutube");
   return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
   return $plugin_array;
}

Первая функция сообщает редактору, что нужно добавить разделитель и кнопку (в нашем примере кнопка имеет имя brettsyoutube) к массиву кнопок. Вторая функция описывает, что кнопка будет делать. В нашем примере она выполняет внешний JavaScript файл из каталога “custom”.

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

function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

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 в материалы. Подобная функция может быть очень полезна на сайте клиента, который слабо владеет вопросами веб программирования.

sourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: brettterpstra.com/adding-a-tinymce-button/
Перевел: Сергей Фастунов
Урок создан: 22 Февраля 2011
Просмотров: 28686
Правила перепечатки


5 последних уроков рубрики "Wordpress"

^ Наверх ^