WordPress中TinyMCE初始化code插件失败报错如何解决？

问题根因 #

你遇到的code插件初始化失败，核心原因是TinyMCE加载插件时的路径匹配错误，你当前仅配置了皮肤路径，没有指定插件的正确加载根路径，TinyMCE默认会用当前页面的相对路径去查找插件，和WordPress内置TinyMCE的实际存放路径不匹配。

解决方案 #

方案1：配置全局TinyMCE根路径（推荐） #

你可以通过WordPress自带的路径输出函数动态传入正确的TinyMCE根路径，避免硬编码相对路径出错：

1. 首先在你的插件挂载自定义JS的代码段中，通过wp_localize_script注入TinyMCE的官方路径：

// 将这段代码放在你插件加载前端资源的钩子中
wp_enqueue_script( 'your-custom-plugin-script', '你的自定义JS文件地址', array('jquery'), '1.0.0', true );
wp_localize_script( 'your-custom-plugin-script', 'customTinymce', array(
    'base_url' => includes_url( 'js/tinymce' )
) );

2. 修改你的TinyMCE初始化代码：

tinymce.init({
    menubar: false,
    selector: '#p_' + r,
    plugins: 'code',
    base_url: customTinymce.base_url,
    suffix: '.min', // 匹配WordPress内置的压缩版资源后缀
    skin_url: customTinymce.base_url + '/skins/lightgray'
});

方案2：显式指定code插件加载路径 #

如果只需要修复code插件的加载问题，可以直接用external_plugins参数单独指定code插件的访问路径：

tinymce.init({
    menubar: false,
    selector: '#p_' + r,
    plugins: 'code',
    skin_url: '../wp-includes/js/tinymce/skins/lightgray',
    external_plugins: {
        'code': window.location.origin + '/wp-includes/js/tinymce/plugins/code/plugin.min.js'
    }
});

额外排查项 #

• 直接在浏览器地址栏访问你的站点域名/wp-includes/js/tinymce/plugins/code/plugin.min.js，确认文件可以正常访问，没有403、404报错
• 确认页面没有重复加载TinyMCE核心JS文件，多次加载核心会导致插件注册冲突
• 确认你要挂载编辑器的DOM元素ID#p_ + r在初始化时已经存在于DOM树中，没有异步加载时序问题

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