如何仅移除经典编辑器TinyMCE样式,保留Guten样式?
仅移除经典编辑器TinyMCE样式而保留Gutenberg样式的方法
你之前使用的wp_deregister_style('wp-reset-editor-styles')会同时作用于经典编辑器和Gutenberg,因为该样式在两个编辑器环境中都会被加载。要实现仅针对TinyMCE移除样式,需要通过条件判断限制操作的生效场景:
解决方案代码
添加以下代码到你的主题functions.php文件或自定义插件中:
add_action( 'admin_enqueue_scripts', 'deregister_tinymce_only_styles', 100 ); function deregister_tinymce_only_styles() { $current_screen = get_current_screen(); // 仅在经典编辑器页面(文章/页面编辑且未启用块编辑器)执行 if ( ( $current_screen->base === 'post' || $current_screen->base === 'page' ) && ! use_block_editor_for_post( $current_screen->post_type ) ) { wp_deregister_style( 'wp-reset-editor-styles' ); // 如需移除其他TinyMCE相关默认样式,可在此追加: // wp_deregister_style( 'tinymce' ); } }
代码说明
- 使用
admin_enqueue_scripts钩子(优先级设为100,确保在样式注册完成后执行) - 通过
get_current_screen()获取当前后台页面的上下文信息 - 用
use_block_editor_for_post()判断当前文章类型是否启用Gutenberg:返回false时即为经典编辑器环境,此时取消注册目标样式 - 这种方式只会影响经典编辑器,不会破坏Gutenberg的样式结构
额外:加载自定义TinyMCE皮肤
如果需要替换为自定义皮肤,可在同一条件下加载你的自定义样式:
add_action( 'admin_enqueue_scripts', 'enqueue_custom_tinymce_skin', 100 ); function enqueue_custom_tinymce_skin() { $current_screen = get_current_screen(); if ( ( $current_screen->base === 'post' || $current_screen->base === 'page' ) && ! use_block_editor_for_post( $current_screen->post_type ) ) { wp_enqueue_style( 'custom-tinymce-skin', get_template_directory_uri() . '/assets/css/custom-tinymce-skin.css', array(), '1.0.0' ); } }
内容的提问来源于stack exchange,提问作者alex
相关产品推荐
相关产品推荐

