WordPress插件中修改TinyMCE实例名避冲突及源码构建方法

一、修改TinyMCE命名空间为tinymce_custom规避冲突 #

要彻底隔离WordPress内置的老旧TinyMCE，需从源码层面修改全局命名空间，步骤如下：

1. 修改源码中的全局命名

   • 下载或克隆TinyMCE源码后，找到核心定义文件src/core/main/ts/Globals.ts
   • 将文件中全局导出的tinymce替换为tinymce_custom：

     // 原代码
     export const tinymce = createGlobal();
     // 修改后
     export const tinymce_custom = createGlobal();
     

   • 全局搜索源码中所有引用全局tinymce变量的位置（如插件、工具函数中的tinymce.xxx），统一替换为tinymce_custom.xxx，注意区分局部变量与全局变量，避免误改。

2. 加载自定义版本到WordPress插件

   • 构建完成后，将编译好的TinyMCE文件（如tinymce.min.js）放到插件目录，比如/your-plugin/assets/tinymce/
   • 在插件PHP文件中禁用WordPress内置TinyMCE并加载自定义版本：

     // 禁用WP内置TinyMCE
     add_filter('tiny_mce_before_init', function() {
         return false;
     });
     // 加载自定义TinyMCE
     wp_enqueue_script(
         'custom-tinymce',
         plugin_dir_url(__FILE__) . 'assets/tinymce/tinymce.min.js',
         array(),
         '6.x', // 替换为实际构建的版本号
         true
     );
     

   • 初始化编辑器时使用tinymce_custom.init()：

     tinymce_custom.init({
         selector: '#your-custom-editor-element',
         // 你的编辑器配置项
         plugins: 'bold italic link',
         toolbar: 'bold italic link'
     });
     

二、从GitHub源码构建TinyMCE新版本 #

1. 准备环境

   • 安装Node.js（16+ LTS版本）及npm/yarn
   • 克隆源码仓库：

     git clone https://github.com/tinymce/tinymce.git
     cd tinymce
     

2. 安装依赖
   在仓库根目录执行：

   npm install
   

3. 构建生产版本

   • 执行构建命令：

     npm run build
     

   • 构建产物位于build目录，其中tinymce.min.js是压缩后的核心文件，plugins/包含官方插件，skins/是编辑器皮肤资源。

4. 可选：构建精简版本

   • 修改根目录的build.config.json，指定需要包含的插件，例如：

     {
       "plugins": ["bold", "italic", "link", "lists"]
     }
     

   • 重新执行npm run build即可得到仅包含指定插件的精简版本。

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