add button to tinymce

时间:2013-04-05 作者:TimeToGiveUpPcForever

我使用以下方法在Tinymce编辑器中插入按钮:

在函数中。php:

class myclaff 
    {
        function __construct() {
        add_action( \'admin_init\', array($this, \'load_tinymceee\') );
        }

        function load_tinymceee() {  
           if ( current_user_can( \'edit_posts\' ) &&  current_user_can( \'edit_pages\' ) ) { 
            //i have done as one plugin has only 1 button

            add_filter(\'mce_external_plugins\', array($this, \'add_myplugin_first\'));
            add_filter(\'mce_buttons_3\', array($this,\'register_mybutton_first\') );

            add_filter(\'mce_external_plugins\', array($this, \'add_myplugin_second\'));            
            add_filter(\'mce_buttons_3\', array($this,\'register_mybutton_second\') ); 
           }  
        }  
        //register first plugin,
        function register_mybutton_first($buttons) {  
           array_push($buttons, \'|\', "UniqueButtonName1" );  
           return $buttons; 
           }
        function add_myplugin_first($plugin_array) {  
           $plugin_array[\'firstplugin\'] = plugins_url(\'mypluginfolder/js/mybutton1.php\');
                                  //or  plugin_dir_url( __FILE__ ) . \'js/mybutton1.php\';
           return $plugin_array; 
           }


        //register second plugin,
        function register_mybutton_second($buttons) {  
           array_push($buttons, \'-\',  "UniqueButtonName2" );  
           return $buttons;  
            }
        function add_myplugin_second($plugin_array) {  
            $plugin_array[\'secondplugin\'] = plugins_url(\'mypluginfolder/js/mybutton2.php\');
           return $plugin_array;  
            }


    } // class ends

//load class
$blablaa = new myclaff();
然后在“mypluginfolder/js/”中,我有这样一个mybutton1。php(和mybutton2.php,代码类似)

(我知道我需要输入tinymce按钮图像的正确url)

<?php 
header("Content-type: application/x-javascript");
error_reporting(0);
define(\'WP_USE_THEMES\', false);
require(\'../../../../wp-blog-header.php\'); 
?>
(function() {
    // START my customs
    tinymce.create(\'tinymce.plugins.firstplugin\', { 



    init : function(ed, url)
    {

       // ---------- start adding buttons section---------------
        ed.addButton(\'UniqueButtonName1\', {  
            title : \'the title of the button\',  
            image : url+\'/images/mybuttonimage.png\',  
            onclick : function() 
            { 
                    // here starts the output
                txt1 : //just a txt1 labeled block of code
                { 
                var mynam = prompt("<?php echo "Please type your name";?>", "Something Default Name"); 
                ed.selection.setContent(\'<center>\' + mynam + \'</center>\'); 
                }
            }                   
        });
                },


    // end of the buttons section
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add(\'firstplugin\', tinymce.plugins.firstplugin);  
})();
但当我点击按钮时,我只会看到javascript弹出框,在这里我只能输入一个字段。代码是什么,实现了有多个字段、框、下拉菜单等。。点击按钮后?

1 个回复
SO网友:T.Todua

你的方法很复杂。。。下面是在TinyMCE中添加按钮的最简单函数:

(在functions.php中插入此代码):

add_action(\'admin_init\', function() {
   if (current_user_can(\'edit_posts\')  &&  get_user_option(\'rich_editing\') == \'true\') {
        add_filter(\'mce_buttons_2\', \'register_buttonfirst\');
        add_filter(\'mce_external_plugins\', \'add_pluginfirst\');
   }
});
function register_buttonfirst($buttons) {  array_push($buttons, "|", "shortcode_button1" );   return $buttons;}
function add_pluginfirst($plugin_array) {$plugin_array[\'MyPuginButtonTag\'] =  plugin_dir_url( __FILE__ ).\'My_js_folder/1_button.php\';return $plugin_array;}
add_filter( \'tiny_mce_version\', \'my_refresh_mceeee1\');  function my_refresh_mceeee1($ver) {$ver += 3;return $ver;}

2) Create 1_button.php in target folder and insert this code (note, change "wp-load" and "ButtonImage.png" urls!!!)

<?php 
header("Content-type: application/javascript");
require(\'../../../../wp-load.php\');
?>
(function() {
    // START my customs
    var abcd =location.host;

    tinymce.create(\'tinymce.plugins.shortcodebuton_plugin2\', {  
        init            : function(ed, this_folder_url)
        {
                    // -------------------------
                    ed.addButton(\'shortcode_button1\', {  
                        title : \'Show Level1 count\',  
                        image : this_folder_url + \'/ButtonImage.png\',
                        onclick : function() {  
                            var vidId = prompt("YouTube Video", "BLABLABLA");
                            ed.selection.setContent(vidId );  
                            //ed.execCommand(\'mceInsertContent\', false, \'vidId\');
                        }  
                    });


        }, 

        createControl   : function(n, cm) {     return null;  }, 
    });  
    tinymce.PluginManager.add(\'MyPuginButtonTag\', tinymce.plugins.shortcodebuton_plugin2);  
})();
*另请注意,在单击编辑器工具栏中的按钮之前,首先,您可能需要在后期编辑器中单击光标,否则按钮可能无法工作。

(有关自定义HTML弹出窗口,请参见以下示例,而不是简单的提示:http://pastebin.com/raw/0BJZm7cd )

结束

相关推荐

如何向WordPress编辑器Tinymce创建的ul标签添加类?

我想为仅由Tinymce创建的ul标签设置一种特殊样式,这意味着仅针对帖子和页面,我只找到了这个过滤器tiny_mce_before_init 以示例说明如何将自定义样式选项添加到现有样式下拉列表中。那么,有没有办法将类添加到WordPress编辑器创建的ul标记中?