无需插件替换WordPress编辑器及转为内置CodeMirror的代码实现咨询

我来帮你搞定这两个编辑器自定义需求，都是无需插件、纯代码实现的方案，直接加到主题的functions.php或者自定义插件里就行：

1. 用TinyMCE替换CodeMirror作为代码编辑器 #

默认情况下，WordPress的「文本」标签编辑器用的是CodeMirror来做语法高亮，但如果你想换回传统的TinyMCE源代码编辑模式，按下面的步骤来：

• 第一步：禁用CodeMirror的资源加载，避免它干扰TinyMCE

add_action('admin_enqueue_scripts', 'replace_codemirror_with_tinymce', 100);
function replace_codemirror_with_tinymce() {
    // 取消注册CodeMirror相关脚本
    wp_deregister_script('code-editor');
    wp_deregister_script('wp-codemirror');
    wp_deregister_script('codemirror');
    
    // 取消注册CodeMirror相关样式
    wp_deregister_style('wp-codemirror');
    wp_deregister_style('codemirror');
}

• 第二步：调整编辑器设置，强制启用TinyMCE的源代码模式

add_filter('wp_editor_settings', 'disable_codemirror_in_editor', 10, 2);
function disable_codemirror_in_editor($settings, $editor_id) {
    // 移除CodeMirror相关配置
    unset($settings['codemirror']);
    unset($settings['codeEditor']);
    
    // 强制开启TinyMCE，关闭Quicktags（如果需要保留简易工具栏，把这里改成true）
    $settings['tinymce'] = true;
    $settings['quicktags'] = false;
    
    return $settings;
}

这样切换到「文本」标签时，就会回到熟悉的TinyMCE源代码编辑界面了。

2. 将纯HTML编辑器转换为内置CodeMirror #

如果你的编辑器现在是纯HTML文本框（没有语法高亮），要启用WordPress自带的CodeMirror，需要加载资源并初始化它：

• 第一步：加载CodeMirror的样式和脚本

add_action('admin_enqueue_scripts', 'enable_codemirror_for_html_editor');
function enable_codemirror_for_html_editor() {
    // 只在文章/页面编辑页加载
    $screen = get_current_screen();
    if (!in_array($screen->id, array('post', 'page'))) {
        return;
    }
    
    // 加载WordPress内置的CodeMirror资源
    wp_enqueue_style('wp-codemirror');
    wp_enqueue_script('wp-codemirror');
    wp_enqueue_script('code-editor');
}

• 第二步：初始化CodeMirror到HTML文本框

add_action('admin_footer', 'initialize_codemirror_on_html_editor');
function initialize_codemirror_on_html_editor() {
    $screen = get_current_screen();
    if (!in_array($screen->id, array('post', 'page'))) {
        return;
    }
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 目标文本框是文章内容的textarea，ID为content
            var textarea = document.getElementById('content');
            if (textarea && typeof wp.codeEditor !== 'undefined') {
                // 初始化CodeMirror，配置HTML语法高亮、行号等
                wp.codeEditor.initialize(textarea, {
                    codemirror: {
                        mode: 'htmlmixed',
                        lineNumbers: true,
                        indentUnit: 2,
                        tabSize: 2,
                        autoCloseTags: true
                    }
                });
            }
        });
    </script>
    <?php
}

另外，如果你想在TinyMCE里实现HTML/CSS语法高亮（替代方案），可以给TinyMCE添加官方的code插件，这样就能在可视化模式中插入带高亮的代码块：

add_filter('tiny_mce_plugins', 'add_tinymce_code_highlight_plugin');
function add_tinymce_code_highlight_plugin($plugins) {
    $plugins[] = 'code';
    return $plugins;
}

添加后，TinyMCE工具栏会多出一个「代码」按钮，点击就能插入格式化的代码块，支持多种语言的语法高亮。

内容的提问来源于stack exchange，提问作者Jafar Ghasemi