在 WordPress 中向 TinyMCE 添加自定义按钮

Question

我想向 TinyMCE 添加一个带有弹出窗口的新按钮。但我从来没有看到按钮。我可能做错了这个修改。如何在 TinyMCE 代码上插入新按钮？

我有这个 TinyMCE 代码用于在 Wordpress 前端显示：

    $qt = '';
if( $this->options[ 'wpcc_edit_in_html' ] ) $qt = array( 'buttons' => 'strong,em,block,del,ul,ol,li,spell,close' );
else {
    $qt = FALSE;
    add_filter( 'wp_default_editor', create_function( '', 'return "tinymce";' ) ); // force visual editor
}
$editor_settings = array(
    'theme_advanced_blockformats' => array( 'h2','h3','p' ),
    'wpautop' => true,
    'media_buttons' => false,
    'tinymce' => array(
        'theme_advanced_buttons1' => 'bold,italic,blockquote,strikethrough,bullist,numlist,spellchecker,|,undo,redo,|,mygallery_button',
        'theme_advanced_buttons2' => '',
        'theme_advanced_buttons3' => '',
        'theme_advanced_buttons4' => ''
    ),
    'quicktags' => $qt
);

还有这个插入新按钮：

function filter_mce_button( $buttons ) {
        // add a separation before our button, here our button's id is "mygallery_button"
        array_push( $buttons, '|', 'mygallery_button' );
        return $buttons;
    }

    function filter_mce_plugin( $plugins ) {
        // this plugin file will work the magic of our button
        $plugins['myplugin'] = plugin_dir_url( __FILE__ ) . 'mygallery_plugin.js';
        return $plugins;
    }

    add_filter( 'mce_buttons', array( $this, 'filter_mce_button' ) );
    add_filter( 'mce_external_plugins', array( $this, 'filter_mce_plugin' ) );

Answer 1

阅读本教程。 https://www.gavick.com/magazine/adding-your-own-buttons-in-tinymce-4-editor.html#tc-section-4

非常详细的教程。但基本要点如下：在您的functions.php中添加此代码以注册并创建您的按钮：

function add_container_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_container_plugin');
 add_filter('mce_buttons_3', 'register_container_button');
}
}
add_action('init', 'add_container_button');


function register_container_button($buttons) {
array_push($buttons, "|", "skizzar_container");
return $buttons;
}

function add_container_plugin($plugin_array) {
$plugin_array['skizzar_container'] = plugin_dir_url( __FILE__ ) . 'shortcodes-js/container.js';;
return $plugin_array;
}

然后您需要创建一个 js 文件来处理按钮在编辑器中的行为方式（您可以看到我在上面的代码中引用为 container.js。这是我的 js 文件的代码：

(function() {
tinymce.PluginManager.add('skizzar_container', function( editor, url ) {
    editor.addButton( 'skizzar_container', {
        title: 'Add a Container',
        icon: 'icon dashicons-media-text',
        onclick: function() {
editor.windowManager.open( {
    title: 'Container',
    body: [{
        type: 'listbox',
        name: 'style',
        label: 'Style',
        'values': [
            {text: 'Clear', value: 'clear'},
            {text: 'White', value: 'white'},                
            {text: 'Colour 1', value: 'colour1'},
            {text: 'Colour 2', value: 'colour2'},
            {text: 'Colour 3', value: 'colour3'},
        ]
    }],
    onsubmit: function( e ) {
        editor.insertContent( '[container style="' + e.data.style + '"]<br /><br />[/container]');
    }
});
}

    });
});
})();

这会创建一个带有下拉菜单的弹出窗口，用户可以在其中选择样式。希望这在某种程度上有所帮助