Статьи

Добавление пользовательских функций в визуальный редактор WordPress

Редактор контента является ключевой частью WordPress. Он позволяет пользователям создавать и управлять своим контентом, галереями и видео в визуальном представлении WYSIWYG (что вы видите, то и получаете).

Это также идет с текстовым представлением, которое позволяет пользователям вставлять или изменять HTML в их содержании.

Визуальный редактор WordPress основан на элементе управления TinyMCE , который обеспечивает представление WYSIWYG, а также кнопки форматирования, которые вы видите:

Визуальный редактор TinyMCE

Благодаря TinyMCE API и перехватчикам фильтров WordPress мы можем добавить свои собственные функциональные возможности в визуальный редактор WordPress. В частности, мы рассмотрим, как создать и зарегистрировать пользовательский плагин TinyMCE, который оборачивает выделенный текст в классе CSS.

Создание плагина TinyMCE

На вашем сайте WordPress создайте папку wp-content/plugins/tinymce-custom-class

Здесь мы будем хранить файлы нашего плагина, поэтому затем создайте файл с именем tinymce-custom-class.php

 

Это дает WordPress некоторую информацию о нашем плагине и настраивает нашу конструкцию, где мы регистрируем наши действия и фильтры TinyMCE.

Фильтры WordPress TinyMCE

TinyMCE предоставляет два ключевых фильтра для регистрации элемента на панели инструментов визуального редактора:

Прежде чем мы вызовем эти фильтры, мы хотим проверить, что мы находимся на экранах администрирования WordPress. Добавьте следующий код в mce_buttons

 __construct

Затем добавьте функцию if ( is_admin() ) {
add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
}

 setup_tinymce_plugin

Это проверяет, может ли текущий зарегистрированный пользователь WordPress редактировать сообщения или страницы. Если они не могут, нет смысла регистрировать наш плагин TinyMCE для этого пользователя, поскольку они никогда не увидят визуальный редактор.

Затем мы проверяем, использует ли пользователь визуальный редактор, поскольку некоторые пользователи WordPress отключают это через Users> Your Profile . Опять же, если пользователь не использует визуальный редактор, мы возвращаем (выходим) функцию, так как нам больше ничего не нужно делать.

Если вышеупомянутые проверки проходят, регистрируются два фильтра WordPress TinyMCE — /**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/

function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );

}mce_external_plugins

Первый фильтр — mce_buttons Давайте добавим вызов функции для этого фильтра внутри нашего класса:

 mce_external_plugins

Здесь мы регистрируем файл JavaScript в /**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/

function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
return $plugin_array;

}

Второй фильтр — $plugin_array Опять же, давайте добавим вызов функции для этого фильтра внутри нашего класса:

 mce_buttons

Это регистрирует программное имя для нашей кнопки TinyMCE ( /**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/

function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, 'custom_class' );
return $buttons;

}

Создание плагина JavaScript

Когда мы вызывали custom_class Теперь нам нужно создать этот файл и добавить в него некоторый код JavaScript. Это скажет TinyMCE, как вывести кнопку и что делать, когда она нажата.

Создайте новый файл в папке плагина с именем mce_external_plugins

 tinymce-custom-class.js

Эта функция JavaScript выполняет несколько действий:

  • Он вызывает класс менеджера плагинов TinyMCE, который мы можем использовать для выполнения ряда действий, связанных с плагином TinyMCE. В частности, мы добавляем наш плагин в TinyMCE, используя функцию (function() {
    tinymce.PluginManager.add( 'custom_class', function( editor, url ) {
    // Add Button to Visual Editor Toolbar
    editor.addButton('custom_class', {
    title: 'Insert CSS Class',
    cmd: 'custom_class',
    image: url + '/icon.png',
    });

    // Add Command when Button Clicked
    editor.addCommand('custom_class', function() {
    alert('Button clicked!');
    });
    });
    })();

  • В рамках процедуры addadd Мы регистрируем нашу кнопку, используя функцию editor
  • Наконец, мы регистрируем команду, используя функцию addButton

Нам также необходимо включить изображение addCommand

TinyMCE

Сохраните код и активируйте плагин в разделе «Администрирование WordPress»> «Плагины».

Затем создайте или отредактируйте страницу или сообщение, и вы, вероятно, увидите свою кнопку со значком:

TinyMCE вставить CSS класс

Нажмите кнопку, и вы увидите, что кнопка нажата! предупреждение:

Сообщение TinyMCE

Определение команды для запуска

Давайте заменим предупреждение подсказкой, запрашивая у пользователя имя класса CSS, которое он хочет обернуть вокруг выделенного текста в визуальном редакторе:

 icon.png

Эта команда выполняет несколько проверок работоспособности, чтобы убедиться, что пользователь выделил какой-то текст, ввел имя класса CSS и не отменил процесс.

Если эти проверки (function() {
tinymce.PluginManager.add( 'custom_class', function( editor, url ) {
// Add Button to Visual Editor Toolbar
editor.addButton('custom_class', {
title: 'Insert CSS Class',
cmd: 'custom_class',
image: url + '/icon.png',
});

// Add Command when Button Clicked
editor.addCommand('custom_class', function() {
// Check we have selected some text selected
var text = editor.selection.getContent({
'format': 'html'
});
if ( text.length === 0 ) {
alert( 'Please select some text.' );
return;
}

// Ask the user to enter a CSS class
var result = prompt('Enter the CSS class');
if ( !result ) {
// User cancelled - exit
return;
}
if (result.length === 0) {
// User didn't enter anything - exit
return;
}

// Insert selected text back into editor, wrapping it in an anchor tag
editor.execCommand('mceReplaceContent', false, '' + text + '');
});
});
})();
execCommand

Если все работает, переключитесь в представление «Текст», и вы увидите, что выбранный вами текст теперь обернут в тег span:

Код TinyMCE

Вывод

Мы создали плагин WordPress для добавления кнопки в визуальный редактор TinyMCE. В этом процессе мы изучили фильтры, которые WordPress использует для интеграции с TinyMCE, а также код JavaScript, необходимый для добавления кнопки и выполнения действия при нажатии.

Чтобы загрузить полный исходный код, посетите репозиторий GitHub или прямую ссылку для скачивания ZIP-файла .

В следующей статье мы расскажем о некоторых более сложных шагах, которые мы можем предпринять для дальнейшей настройки нашего плагина TinyMCE.