Август
2
2011

Как добавить кнопку в Визуальный редактор WordPress

Как добавить кнопку в Визуальный редактор WordPress

Рано или поздно пользователи WordPress сталкиваются с необходимостью расширить функции визуального редактора. Я столкнулся с этим, когда решил сделать себе шорткод для вставки видео с youtube.

Итак, есть шорткод youtube, для которого нужно сделать отдельную кнопку в редакторе. По клике на эту кнопку появляется окно с полем для вставки ссылки.

У меня это все оформлено как отдельный плагин video-onclick и весь код находится в папке плагина.

PHP код

Для начала нужно добавить нашу кнопку в панель. Код живет в фале video-onclick.php

function video_onclick_button($buttons) {
array_push($buttons, 'youtube');
return $buttons;
}
add_filter('mce_buttons', 'video_onclick_button', 0);

Теперь нужно с этой кнопкой связать обработчик

function video_onclick_java($plugin_array) {
$plugin_array['youtube'] = plugins_url().'/video-onclick/video-onclick.js';
return $plugin_array;
}
add_filter('mce_external_plugins', 'video_onclick_java');

Обработчик представляет собой отдельный код на java-script

Java-Script код

Этот код исполняется при загрузке визуального редактора. Находится в файле video-onclick.js. Пояснения будут после кода.

(function() {
tinymce.create('tinymce.plugins.youtube', {
init : function(ed, url) {
ed.addButton('youtube', {
title : 'YouTube',
image : url+'/youtube.png',
onclick : function() {
idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
var vidId = prompt("YouTube Video", "Enter the id or url for your video");
var m = idPattern.exec(vidId);
if (m != null && m != 'undefined')
ed.execCommand('mceInsertContent', false, 'youtube'+m[1]+'/youtube');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "Video Onclick YouTube",
author : 'Igor Tesliuk',
authorurl : 'http://tigors.net/',
infourl : 'http://tigors.net/video-onclick/',
version : "1.0"
};
}
});
tinymce.PluginManager.add('youtube', tinymce.plugins.youtube);
})();

tinymce.create создает новый класс tinymce.plugins.youtube, далее идет описание класса.

tinymce.PluginManager.add связывает созданный класс с коротким именем, которое задавалось в PHP коде.

ed.addButton находит среди кнопок на панели место, помеченное как youtube и вставляет туда саму кнопку.

ed.execCommand выполняет команду, в данном случае это mceInsertContent, который вставляет на месте курсора заданный код.

Неправильная раскладка: rfr lj,fdbnm ryjgre d dbpefkmysq htlfrnjh цщквзкуыы

Понравилась статья? Посоветуйте друзьям!

JavaScript PHP shortcode WordPress WP Plugin


Понравилась статья? Подпишись на рассылку по E-Mail или в RSS.
  • Попробуем ето сделать, учил пхп и забросил. Нужно сначало начинать
  • ЫЧ
    ПИШИ ЧТО И В КАКОЙ ФАЙЛ НУЖНО ЗАКИДЫВАТЬ. К-О-Н-К-Р-Е-Т-Н-О
  • Да... Написано для инопланетян конечно.