如何在TinyMCE编辑器中添加快捷码按钮?

时间:2012-11-13 作者:Juan Lie

如何在wordpress帖子中制作插件图标?我想在插件代码中插入的代码将出现在贴吧[wp admin/post.php]中。

如下图所示:

enter image description here

输出:如果单击图标,它会自动写入[plugin] 对于以下帖子内容:

enter image description here

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

要将我们的按钮添加到TinyMCE编辑器,我们需要做以下几件事:

将我们的按钮添加到工具栏中注册一个TinyMCE插件创建一个TinyMCE插件,该插件告诉TinyMCE单击按钮时要做什么

步骤#1和#2

在这些步骤中,我们注册了我们的TinyMCE插件,该插件将位于\'path/to/shortcode.js\' (参见wpse72394_register_tinymce_plugin() (见下文)

 // init process for registering our button
 add_action(\'init\', \'wpse72394_shortcode_button_init\');
 function wpse72394_shortcode_button_init() {

      //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", "wpse72394_register_tinymce_plugin"); 

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


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array[\'wpse72394_button\'] = \'path/to/shortcode.js\';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}
现在我们需要创建TinyMCE插件。这将被归档\'path/to/shortcode.js\' (如早期步骤中所述)。

jQuery(document).ready(function($) {

    tinymce.create(\'tinymce.plugins.wpse72394_plugin\', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand(\'wpse72394_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);
});

SO网友:developdaly

这里有太多的内容无法给出完整的答案,请查看此指南:http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

您必须创建一个Javascript文件,该文件从您通过WordPress注册的按钮执行操作,WordPress将TinyMCE按钮插入编辑器。

结束

相关推荐

Shortcode interpreted as text

我在我的一页中有以下短代码[[Intern: Termine/News]] 这适用于受密码保护的子页。现在,我希望所有终端/新闻类别的新闻都在父页面上。所以我把代码放在受密码保护的父页面上。现在文本已呈现-我只能看到短代码文本。但我应该看看所有的文章!怎么了?还是我误解了什么?编辑:找到了答案。模板中直接有一些代码,因此WP后端中的内容被完全忽略。在模板php文件中添加了代码,现在可以使用了。