Angular ui-tinymce结合RequireJS使用时配置选项失效求助

我之前也碰到过几乎一模一样的问题！当时折腾了好一阵才找到根源，给你几个具体的排查和解决方向：

1. 检查RequireJS的依赖声明是否完整 #

ui-tinymce指令依赖AngularJS和TinyMCE两个核心库，如果RequireJS没有正确声明这些依赖，会导致ui-tinymce在库未完全加载时就执行，进而无法正确读取配置。你需要给angular-ui-tinymce添加shim配置：

requirejs.config({
  baseUrl: '/js',
  paths: {
    angular: 'angular.min',
    tinymce: 'tinymce/tinymce.min',
    'angular-ui-tinymce': 'path/to/angular-ui-tinymce.min'
  },
  shims: {
    'angular': {
      exports: 'angular'
    },
    'tinymce': {
      exports: 'tinymce',
      init: function () {
        this.tinyMCE.DOM.events.domLoaded = true;
        return this.tinyMCE;
      }
    },
    'angular-ui-tinymce': {
      // 确保先加载Angular和TinyMCE
      deps: ['angular', 'tinymce'],
      exports: 'angular.module("ui.tinymce")'
    }
  }
});

2. 修复TinyMCE的资源路径问题 #

当用RequireJS加载TinyMCE时，它默认的资源查找路径（比如语言包、插件）会被打乱，导致语言配置看似被忽略（实际是语言包加载失败）。你需要在编辑器配置里明确指定TinyMCE的基础路径：

// 你的Angular控制器里的配置
$scope.tinymceOptions = {
  language: 'zh_CN',
  // 指向你的tinymce目录（注意路径要和baseUrl对应）
  base_url: '/js/tinymce',
  // 其他配置项...
  menubar: 'file edit view insert format tools table',
  toolbar: 'undo redo | bold italic | alignleft aligncenter alignright'
};

另外要确保tinymce/langs目录下存在对应的语言包文件（比如zh_CN.js）。

3. 验证全局对象的暴露是否正确 #

有些版本的TinyMCE暴露的全局对象是tinyMCE（大写M）而非tinymce，如果你的shim配置里exports的名称不对，会导致ui-tinymce找不到TinyMCE实例。可以尝试修改shim的exports：

shims: {
  'tinymce': {
    // 改成tinyMCE试试
    exports: 'tinyMCE',
    init: function () {
      this.tinyMCE.DOM.events.domLoaded = true;
      return this.tinyMCE;
    }
  }
}

4. 调试确认配置是否真的被传递 #

可以在ui-tinymce指令的源码中添加断点，查看调用tinymce.init()时传入的配置对象：

• 如果配置对象里没有你设置的language等属性，说明ui-tinymce没有正确从Angular scope获取配置，可能是指令加载时机过早，或者scope绑定有问题；
• 如果配置对象是完整的，但TinyMCE未生效，那大概率是TinyMCE的资源加载路径错误，回到第二步排查。

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