将简码的自定义按钮添加到wordpress编辑器

时间:2019-10-05 16:07:49

标签: php wordpress tinymce

基于this question(我在stackoverflow网络的另一个站点上找到),我想向tinyMCE wordpress编辑器中添加一些按钮。我要添加六个简码,但不确定如何继续。 我已经修改了代码以满足我的需要,但是我不确定它是否可以工作以及我如何需要在JavaScript代码中添加所有按钮。任何人都可以帮助/指导我吗?

实际代码库

class BootstrapTinyMCE{

  public function __construct()
  {
    add_action( 'init', [$this, 'shortcodeButtonInit'] );
  }

  // init process for registering our button

  public function shortcodeButtonInit() {

       //Abort early if the user will never see TinyMCE
       if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
            return;

       //Add a callback to regiser our tinymce plugin
       add_filter("mce_external_plugins", "bs_register_tinymce_plugin");

       // Add a callback to add our button to the TinyMCE toolbar
       add_filter('mce_buttons', 'bs_add_tinymce_button');
  }


  //This callback registers our plug-in
  public function bs_register_tinymce_plugin( array $plugin_array ) : array
  {
     $plugin_array['bs_button'] = 'js/shortcodes.js';
     return $plugin_array;
  }

  //This callback adds our button to the toolbar
  public function bs_add_tinymce_button( $buttons )
  {
             //Add the button ID to the $button array
     $buttons[] = "container_button";
     $buttons[] = "col_button";
     $buttons[] = "parallax_button";
     $buttons[] = "swiper_button";
     $buttons[] = "modal_button";

     return $buttons;
  }

}

(function($){
  $(document).ready(function(){
    tinymce.create('tinymce.plugins.bs_shortcodes_plugin', {
    init : function(ed, url) {
            // Register command for when button is clicked
            ed.addCommand('wpbootstrap_insert_shortcode', function() {
                selected = tinyMCE.activeEditor.selection.getContent();

                if( selected ){
                    //If text is selected when button is clicked
                    //Wrap shortcode around it.
                    content =  '[shortcode]'+selected+'[/shortcode]';
                }else{
                    content =  '[shortcode]';
                }

                tinymce.execCommand('mceInsertContent', false, content);
            });

        // Register buttons - trigger above command when clicked
        ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
    },
});

// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);


  });
}(jQuery));

0 个答案:

没有答案