将CSS添加到管理TinyMCE编辑器以用于自定义按钮

时间:2014-03-25 作者:McShaman

我已经创建了一个插件,在管理编辑页面/帖子区域的TinyMCE编辑器中添加了一个新按钮。我正在尝试按照Wordpress 3.8中的其他按钮对其应用字体图标。我已经创建了一个CSS文件,将如下所示:

.mce_mybutton::before {
    content: \'\\f459\';
}
我所需要做的就是加载编辑器时加载CSS。。。看起来很容易。

我试过了add_editor_style() 但很明显,它只是用于主题开发,而不是插件

我找到了mce_css 过滤器,但不起作用。我认为它只适用于将CSS应用于编辑器中的内容。。。不是按钮。

我阅读了edit-from-advanced.phpclass-wp-editor.php 负责在管理编辑页面/帖子上生成编辑器的文件。在_WP_Editors 看起来很有希望的对象:

\'editor_css\' => \'\', // intended for extra styles for both visual and Text editors buttons, needs to include the <style> tags, can use "scoped".
然而,我找不到一个方法来吸引它。

任何帮助都将不胜感激。

谢谢

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

首先,我认为css应该只使用一个冒号:

.mce_mybutton:before {
    content: \'\\f459\';
}
现在,为了将css放到正确的位置。首先,我们向admin_print_styles; 然后检查是否正在编辑帖子或页面;然后我们将样式表排队。

我们运行检查以查看是否正在编辑,这样就不会在每个管理页面上将样式表排队。我们这样做是为了尽量减少与其他插件/主题的冲突;而且,因为在不需要代码的页面上运行代码是没有常识的。

所以我们最终得到如下函数:

add_action(\'admin_print_styles\', \'add_my_tinymce_button_css\');
function add_my_tinymce_button_css() {

    // Get current screen and determine if we are using the editor
    $screen = get_current_screen();
    // If we are editing (adding new) post or page
    if ( $screen->id == \'page\' || $screen->id == \'post\' ) {

        // Register our stylesheet
        // Note: The stylesheet resides in our plugin directory/css/admin.css
        // You may change this to suit your preferences
        wp_register_style(\'my_tinymce_button_css\', plugin_dir_url( __FILE__ ) . (\'/css/admin.css\'), array());

        // Now we enqueue our stylesheet
        wp_enqueue_style(\'my_tinymce_button_css\');

        // Depending on when you fire things, you may/may not need to enqueue \'dashicons\'
        wp_enqueue_style(\'dashicons\');
    }
}

结束

相关推荐

WordPress无法打开主题-editor.php

我有一个网站RadhanathSwami。信息。我使用“RadhanathSwami.info/wp admin”登录为管理员。然后我尝试了“radhanathswami.info/wp-admin/theme-editor.php” You do not have sufficient permissions to access this page. 我不知道该怎么办。我在google上搜索了很多,但没有多少帮助。我没有访问服务器的权限不是ftp。我所能做的就是从管理仪表板。我使用的是主题滨