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

Добавление кнопки к HTML-редактору.

Для этого необходимо использовать javascript функцию QTags.addButton, которая выглядит следующим образом:

QTags.addButton(id, display, arg1, arg2, access_key, title, priority, instance);

наиболее используемые параметры:

id – уникальный id нашей кнопки;

display – имя, которое будет отображаться;

arg1 – открвыающий тэг;

arg2 – закрывающий тэг;

access_key – горячая клавиша;

title – аттрибут title кнопки.

Пример:

<script type="text/javascript">// <![CDATA[
QTags.addButton('fb_button', 'button_name', '[button]', '[/button]', 'b', 'button_name');
// ]]></script>

Также вместо открывающего/закрывающего тэга можно использовать ф-цию, которая будет выполняться при нажатии на кнопку:

<script type="text/javascript">// <![CDATA[
QTags.addButton('fb_button', 'button_name', fb_callback);
 
function fb_callback() {
alert('Hello World!');
}
// ]]></script>

Добавление кнопки к visual-редактору.

add_action('init', 'foo_addbuttons');
function foo_addbuttons() {
  if (!current_user_can('edit_posts') &amp;&amp; !current_user_can('edit_pages')) return;
 
  if (get_user_option('rich_editing')=='true') {
    add_filter('mce_buttons', 'foo_mce_register_button');
    add_filter("mce_external_plugins", "foo_add_tinymce_plugin");
  }
}
 
//регистрируем кнопку
function foo_mce_register_button($buttons) {
  array_push($buttons, '|', 'foo_button');
  return $buttons;
}
 
//добавляем плагин к TinyMCE
function foo_add_tinymce_plugin($plugin_array) {
  $plugin_array['foo_button'] = get_stylesheet_directory_uri() . '/js/foo_mce_plugin.js';
  return $plugin_array;
}

Теперь в папке js темы (для плагина, думаю не составит труда изменить путь) создаем файл со скриптом плагина для TinyMCE (foo_mce_plugin.js):

(function() {
  tinymce.create('tinymce.plugins.foo', {
    init: function(ed, url) {
      ed.addButton('foo_button', {
        title: 'Foo Button',
        image: url + '/foo_btn.gif',
        onclick: function() {
          ed.windowManager.alert('Hello world!');
        }
      });
    },
    createControl: function(n, cm) {
      return null;
    },
    getInfo: function() {
      return {
        longname : 'FooBar Button',
        author : 'John Doe',
        authorurl : 'http://JohnDoe.tld/',
        infourl : 'http://FooBar.JohnDoe.tld/',
        version : '1.0'
      };
    }
  });
  tinymce.PluginManager.add('foo_button', tinymce.plugins.foo);
})();

Ссылки по теме:

One thought on “Добавляем кнопки к редактору WordPress

  1. Pingback: Добавляем кнопки к редактору в полноэкранном режиме | Coding Tips

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>