注册管理区域的自定义TinyMCE按钮,以使用wp_EDITOR的自定义实例

时间:2012-04-12 作者:turbonerd

幸亏this answer here, 我可以使用wp_editor 确定每个不同TinyMCE实例使用的按钮。

然而,我正在努力注册我的按钮——它们根本没有以我认为应该的方式出现在TinyMCE界面上!

我尝试了两种不同的方法-将代码放入species-profiles 插件(一种称为species 我希望TinyMCE实例在其中发挥作用),并将代码放入我的主题functions.php.

我使用的代码是:

function add_SF_buttons() {
    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_SF_buttons_plugins\');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array[\'pH\'] = get_bloginfo(\'template_directory\') . \'/tinymce_buttons/pH/editor_plugin.js\';
    $plugin_array[\'pH_min\'] = get_bloginfo(\'template_directory\') . \'/tinymce_buttons/pH_min/editor_plugin.js\';
    $plugin_array[\'pH_max\'] = get_bloginfo(\'template_directory\') . \'/tinymce_buttons/pH_max/editor_plugin.js\';
    return $plugin_array;
}

add_action( \'init\', \'add_SF_buttons\' );
我用来初始化wp_editor 根据上述答案,实例如下:

<?php
    wp_editor(
        $distribution,
        \'distribution\',
        array(
          \'media_buttons\' => false,
          \'textarea_rows\' => 8,
          \'tabindex\' => 4,
          \'tinymce\' => array(
            \'theme_advanced_buttons1\' => \'bold, italic, |, bullist, numlist, |, pH, pH_min\',
            \'theme_advanced_buttons2\' => \'\',
            \'theme_advanced_buttons3\' => \'\',
            \'theme_advanced_buttons4\' => \'\',
          ),
        )
    );
?>
我尝试使用的插件都是这样的:

(function() {
    tinymce.create(\'tinymce.plugins.pH\', {
        init : function(ed, url) {
            ed.addButton(\'pH\', {
                title : \'pH\',
                image : url+\'/pH.png\',
                onclick : function() {
                    var caret = "caret_pos_holder";
                    var insert = \'[pH]\';
                    ed.execCommand(\'mceInsertContent\', false, insert);
                    ed.selection.select(ed.dom.select(\'span#caret_pos_holder\')[0]); //select the span
                    ed.dom.remove(ed.dom.select(\'span#caret_pos_holder\')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            /*
             * I intentionally left the information of
             * Brett Terpstra, as his code was the
             * foundation for this.
            */
            return {
                longname : "Brett\'s YouTube Shortcode",
                author : \'Brett Terpstra\',
                authorurl : \'http://brettterpstra.com/\',
                infourl : \'http://brettterpstra.com/\',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add(\'pH\', tinymce.plugins.pH);
})();
就我所知,我在那里所做的一切都是正确的?但自定义按钮无法显示。我想我做错了什么-初始化错误,或者其他什么。

How the TinyMCE interface appears

提前感谢,

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

我将您的代码复制到我的函数中。并添加了一个简单的管理面板(“Foo”)来显示编辑器。然后,我在当前主题中为编辑器按钮创建了一个新目录,并将编辑器按钮JS放入相关文件:/wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.js.

结果:当我转到Dashboard>Foo(我创建的面板)时,它按预期工作。屏幕截图:

Screenshot

代码:

/**
 * This function conditionally hooks the function that adds custom buttons to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons() {
    if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') )
        return;
    if ( get_user_option(\'rich_editing\') == \'true\') {
        add_filter(\'mce_external_plugins\', \'wpse_48782_add_SF_buttons_plugins\');
    }
}
add_action( \'init\', \'wpse_48782_add_SF_buttons\' );

/**
 * Adds the pH button to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons_plugins($plugin_array) {
    $plugin_array[\'pH\'] = get_bloginfo(\'template_directory\') . \'/tinymce_buttons/pH/editor_plugin.js\';
    return $plugin_array;
}

/**
 * Load a dummy admin panel to display editor
 */
function wpse_48782_add_panel() {
    add_menu_page( \'Foo\', \'foo\', \'manage_options\', \'foo\', \'wpse_48782_render_panel\' );
}
add_action( \'admin_menu\', \'wpse_48782_add_panel\' );

/**
 * Callback to render the \'Foo\' admin panel\'
 */
function wpse_48782_render_panel() {
    ?>

    <div class="wrap">

    <?php

    $distribution = \'abc\';

    wp_editor(
        $distribution,
        \'distribution\',
        array(
          \'media_buttons\' => false,
          \'textarea_rows\' => 8,
          \'tabindex\' => 4,
          \'tinymce\' => array(
            \'theme_advanced_buttons1\' => \'bold, italic, |, bullist, numlist, |, pH, pH_min\',
            \'theme_advanced_buttons2\' => \'\',
            \'theme_advanced_buttons3\' => \'\',
            \'theme_advanced_buttons4\' => \'\',
          ),
        )
    );

    ?>
    </div>
    <?php
}
所以,你基本上是对的,你所做的一定与我所做的不同,你在解释中没有提到的东西。有几种可能性:

您尚未放置editor\\u插件。js文件位于正确的位置。如上所述,您的道路通向:[your-theme-dir]/tinymce_buttons/pH/editor_plugin.js (以及-max和-min版本)。确保这些文件存在,并且它们包含上面发布的editor\\u插件js。如果打开浏览器的JS控制台,您应该能够一目了然地判断路径是否正确-如果路径不正确,您将得到“NetworkError”或类似的结果。

插件冲突。一个非常粗鲁的插件/主题可能正在过滤\'mce_external_plugins\' 以及清除其他插件所做的更改(通过返回与$pluginsArray 传递给过滤器)。Grep通过您的wp内容目录查找“mce\\u external\\u plugins”,并检查您找到的内容;或者您可以尝试禁用所有其他插件并切换到二十一。请注意,插件还可以通过在\'tiny_mce_before_init\' 过滤器,它是在编辑器呈现之前最后一个触发的过滤器-也可以在内容目录中查找它。

您将代码放在了错误的位置,因此WP不会加载代码。我知道你说你已经把它放在你的主题里了functions.php - 但你确定吗?也许你把它放错了主题或类似的东西?我们都有这样的日子;)

第一个函数的开头有一个条件:如果当前用户无法编辑\\u帖子,也无法编辑\\u页面,请不要向他们显示按钮。请确保您正在使用至少具有其中一个上限的用户进行测试。(或者尝试将此检查全部注释出来,作为测试。)

SO网友:turbonerd

多亏了Boone出色的回答,我找到了确切的问题。

For some reason, when there are instances of wp_editor on the page set with teeny=true, custom buttons cannot be used on any instance of wp_editor.

如果删除teeny=true 参数,问题消失了。

结束

相关推荐

TinyMCE编辑在传记信息上变白

我尝试了以下解决方案:How to use tinyMCE for user “biographical info” without messing with any core file? 并将其添加到我的插件代码中。问题是,它会将编辑器变为白色(请参见此图片-->http://i.imgur.com/HKp0A.png)我怎样才能让它出现?当做约翰