You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何仅移除经典编辑器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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.02 19:51:01