我已经创建了一个插件,在管理编辑页面/帖子区域的TinyMCE编辑器中添加了一个新按钮。我正在尝试按照Wordpress 3.8中的其他按钮对其应用字体图标。我已经创建了一个CSS文件,将如下所示:
.mce_mybutton::before {
content: \'\\f459\';
}
我所需要做的就是加载编辑器时加载CSS。。。看起来很容易。
我试过了add_editor_style()
但很明显,它只是用于主题开发,而不是插件
我找到了mce_css
过滤器,但不起作用。我认为它只适用于将CSS应用于编辑器中的内容。。。不是按钮。
我阅读了edit-from-advanced.php
和class-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".
然而,我找不到一个方法来吸引它。
任何帮助都将不胜感激。
谢谢
最合适的回答,由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\');
}
}