如何将拆分按钮或列表框添加到WordPress TinyMCE实例

时间:2011-03-27 作者:Gina Alessia

我已经在tinymce中添加了一个自定义按钮来插入我的短代码,但我有这么多,我想改为制作一个拆分按钮,我不知道怎么做。任何人都可以帮忙。下面是我用来创建普通按钮的代码:

在函数中。php:

/**
Hook into WordPress
*/

add_action(\'init\', \'onehalf_button\');  
/**
Create Our Initialization Function
*/

function onehalf_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_plugin\' );
     add_filter( \'mce_buttons\', \'register_button\' );
   }

}
/**
Register Button
*/

function register_button( $buttons ) {
 array_push( $buttons, "|", "onehalf" );
 return $buttons;
}
/**
Register TinyMCE Plugin
*/

function add_plugin( $plugin_array ) {
   $plugin_array[\'onehalf\'] = get_bloginfo( \'template_url\' ) . \'/js/tinymce_buttons.js\';
   return $plugin_array;
}
在自定义插件中。js公司

// JavaScript Document
(function() {
    tinymce.create(\'tinymce.plugins.onehalf\', {
        init : function(ed, url) {
            ed.addButton(\'onehalf\', {
                title : \'One Half Column\',
                image : url+\'/mylink.png\',
                onclick : function() {
                     ed.selection.setContent(\'[one_half]\' + ed.selection.getContent() + \'[/one_half]\');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add(\'onehalf\', tinymce.plugins.onehalf);
})();
我在这里发现了一些东西http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php 但不知道如何将其实现到WP中。

有人能帮忙吗?谢谢

2 个回复
最合适的回答,由SO网友:t31os 整理而成

它应该很简单,将链接页面中的相关代码复制到现有的TinyMCE插件中,更新一些字符串。。。完成!。。

从你的TinyMCE插件JS开始,看看你的表现如何。。

// JavaScript Document
(function() {
    // Creates a new plugin class and a custom listbox
    tinymce.create(\'tinymce.plugins.onehalf\', {
        createControl: function(n, cm) {
            switch (n) {
                case \'onehalf\':
                    var mlb = cm.createListBox(\'onehalf\', {
                        title : \'My list box\',
                        onselect : function(v) {
                            tinyMCE.activeEditor.windowManager.alert(\'Value selected:\' + v);
                        }
                    });

                    // Add some values to the list box
                    mlb.add(\'Some item 1\', \'val1\');
                    mlb.add(\'some item 2\', \'val2\');
                    mlb.add(\'some item 3\', \'val3\');

                // Return the new listbox instance
                return mlb;

                /*
                case \'onehalf\':
                var c = cm.createSplitButton(\'onehalf\', {
                    title : \'My split button\',
                    image : \'img/example.gif\',
                    onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert(\'Button was clicked.\');
                    }
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : \'Some title\', \'class\' : \'mceMenuItemTitle\'}).setDisabled(1);

                    m.add({title : \'Some item 1\', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert(\'Some  item 1 was clicked.\');
                    }});

                    m.add({title : \'Some item 2\', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert(\'Some  item 2 was clicked.\');
                    }});
                });

                // Return the new splitbutton instance
                return c;
                */
            }
            return null;
        }
    });
    tinymce.PluginManager.add(\'onehalf\', tinymce.plugins.onehalf);
})();
如果有些东西不起作用,请尽可能多地反馈信息,例如,你尝试了什么,结果是什么,发生了什么,没有发生什么。。。等

SO网友:Elio

T31的答案很好。只需补充说明:要获取图像的路径,请添加

init : function(ed, url) {
    theurl = url;
},
就在之前createControl: function... 现在你可以在

var c = cm.createSplitButton(\'onehalf\', {
    title : \'My split button\',
    image : theurl + \'/theicon.png\',
    onclick : function() {
           tinyMCE.activeEditor.windowManager.alert(\'Button was clicked.\');
    }
});
假设您的图标就在TinyMCE插件的JavaScript旁边。

结束

相关推荐

我正在使用ADD_META_BOX(),但希望为每个框包括TinyMCE编辑器*和*媒体上传

我正在使用一个非常轻量级的插件,名为WPAlchemy 这让我可以快速为帖子和页面创建元框。我已经可以改变信仰了<textarea>\'他很喜欢rich,TinyMCE的编辑。问题是,我想为那些元数据库/编辑器包括媒体上载按钮。我已经能够在每个TinyMCE编辑器上添加按钮,但当我单击“插入到帖子”时,它不是(不知道)哪个<textarea> 插入请求的图片/媒体。作为参考,我在<textarea>:<div id=\"media-buttons\" class=