Добавление пользовательской кнопки в TinyMCE 4, доступно с WordPress 3.9-beta1

Следующий небольшой плагин создает пользовательскую кнопку в первой строке редактора TinyMCE версии 4 в WordPress, протестирован в WP версии 3.9-beta2.

Плагин включает var_dump для понимания значений. Также можно добавить кнопку в другие строки визуального редактора, используя другой хук, например, для второй строки: mce_buttons_2.

Результат

Плагин, PHP часть - tinymce4-test.php

<?php
/**
 * Plugin Name: TinyMCE 4 @ WP Test
 * Description: 
 * Plugin URI:  
 * Version:     0.0.1
 * Author:      Frank Bültge
 * Author URI:  http://bueltge.de
 * License:     GPLv2
 * License URI: ./assets/license.txt
 * Text Domain: 
 * Domain Path: /languages
 * Network:     false
 */

add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
    global $typenow;

    // Только для типов записей: post и page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) )
        return ;

    add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
    // Добавить в строку 1 WP TinyMCE
    add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}

// Включение JS для TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {

    $plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
    // Вывод всех путей JS плагинов
    var_dump( $plugin_array );
    return $plugin_array;
}

// Добавление ключа кнопки для обращения через JS
function fb_add_tinymce_button( $buttons ) {

    array_push( $buttons, 'fb_test_button_key' );
    // Вывод всех кнопок
    var_dump( $buttons );
    return $buttons;
}

Скрипт, JavaScript часть - plugin.js

( function() {
    tinymce.PluginManager.add( 'fb_test', function( editor, url ) {

        // Добавление кнопки, открывающей окно
        editor.addButton( 'fb_test_button_key', {

            text: 'FB Test Button',
            icon: false,
            onclick: function() {
                // Открытие окна
                editor.windowManager.open( {
                    title: 'Пример плагина',
                    body: [{
                        type: 'textbox',
                        name: 'title',
                        label: 'Заголовок'
                    }],
                    onsubmit: function( e ) {
                        // Вставка содержимого при отправке формы окна
                        editor.insertContent( 'Заголовок: ' + e.data.title );
                    }

                } );
            }

        } );

    } );

} )();

Gist

Используйте Gist bueltge/9758082 в качестве справочника или для загрузки. В Gist также приведены дополнительные примеры различных кнопок в TinyMCE.

Ссылки

• TinyMCE API 4
• Руководство по миграции с версии 3.x
• WP Trac Ticket
• Стандартный шрифт TinyMCE для иконок
• Альтернативные иконки через Dashicon или Genericons
• Стандартные плагины TinyMCE
• Плагин совместимости - Этот плагин содержит несколько файлов совместимости для старой ветки 3.x. Это позволяет запускать большинство старых плагинов 3.x без изменений.