在 WordPress 中为 TinyMCE 添加自定义按钮 [英] Add Custom Button to TinyMCE in WordPress

问题描述

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

I want to add a new button with popup to TinyMCE. But i never see the button. I probably are doing wrong this modification. How to insert the new button on that TinyMCE Code?

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

I have this TinyMCE Code for showing in Wordpress Front-End:

    $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' ) );

推荐答案

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

非常详细的教程.但最基本的内容如下:在您的functions.php中添加此代码以注册并创建您的按钮:

Very detailed tutorial. But the bare essentials are as follows: in your functions.php add this code to register and create your button:

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 文件的代码:

Then you'll need to create a js file which handles how the buttons acts in the editor (you can see mine is referenced in the code above as container.js. Here is the code of my js file:

(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]');
    }
});
}

    });
});
})();

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

This creates a popup with a dropdown menu where the user can select a style. Hope this helps in some way

这篇关于在 WordPress 中为 TinyMCE 添加自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！