如何通过外部文件配置TinyMCE init config实现多编辑器配置按需覆写

步骤1：抽离全局基础配置为独立外部文件 #

新建独立的tinymce-base-config.js文件，把所有业务场景通用的初始化规则都定义在这个文件里，挂到全局作用域供页面调用：

// 全局通用TinyMCE基础配置
window.TINYMCE_BASE_CONFIG = {
  height: 500,
  language: 'zh_CN',
  menubar: 'edit view insert format table',
  plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
  toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
  content_style: 'body { font-family: system-ui, sans-serif; font-size:14px; line-height:1.6 }',
  branding: false,
  promotion: false,
  // 其余通用配置项统一在此维护
}

步骤2：页面引入依赖 #

在需要使用富文本编辑器的页面，按顺序先加载TinyMCE核心文件，再加载刚才创建的全局配置外部文件：

<!-- 加载TinyMCE核心库 -->
<script src="/your/static/path/tinymce.min.js"></script>
<!-- 加载全局基础配置 -->
<script src="/your/static/path/tinymce-base-config.js"></script>

步骤3：按业务需求覆写配置，完成个性化初始化 #

不要直接修改全局基础配置对象，通过对象合并的方式，基于基础配置生成对应场景的独立配置对象，需要覆写的项直接在新对象里声明即可，不需要修改的项会自动继承基础配置：

// 示例1：评论区轻量编辑器
const commentEditorConfig = {
  ...window.TINYMCE_BASE_CONFIG,
  height: 220,
  menubar: false, // 覆写：隐藏菜单栏
  plugins: 'autolink lists link', // 覆写：只加载评论场景需要的插件
  toolbar: 'undo redo | bold italic | bullist numlist | link', // 覆写：简化工具栏
  placeholder: '请输入评论内容' // 新增：评论场景独有的占位提示
}
// 初始化评论编辑器
tinymce.init({
  ...commentEditorConfig,
  selector: '#comment-editor'
})

// 示例2：后台文章编辑编辑器
const articleEditorConfig = {
  ...window.TINYMCE_BASE_CONFIG,
  height: 750,
  // 新增：文章场景专属的图片上传配置
  images_upload_url: '/api/editor/upload',
  automatic_uploads: true,
  // 扩展工具栏：在基础工具栏前插入图片、媒体插入按钮
  toolbar: 'image media | ' + window.TINYMCE_BASE_CONFIG.toolbar
}
// 初始化文章编辑器
tinymce.init({
  ...articleEditorConfig,
  selector: '#article-editor'
})

特殊场景处理（嵌套配置项合并） #

如果配置里存在函数、多层嵌套对象（比如setup回调、自定义文件选择回调），浅合并会直接覆盖整个嵌套字段，需要保留基础配置逻辑的话，手动做字段合并即可：

const customEditorConfig = {
  ...window.TINYMCE_BASE_CONFIG,
  setup: (editor) => {
    // 先执行基础配置里的setup逻辑
    if (typeof window.TINYMCE_BASE_CONFIG.setup === 'function') {
      window.TINYMCE_BASE_CONFIG.setup(editor)
    }
    // 再追加当前场景独有的逻辑
    editor.on('change', () => {
      // 自定义内容变更监听逻辑
    })
  }
}

注意：所有个性化配置调整都必须在合并生成的新对象上操作，禁止直接修改window.TINYMCE_BASE_CONFIG的属性，避免全局配置被污染，影响同页面其他编辑器的正常初始化。

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