Using Angular ui-tinymce with RequireJS?

117 Views Asked by At

I have been using the ui-tinymce directive in an AngularJS application and it works fine. I am able to provide options to the editor like language, menus, etc.

I have started using RequireJS to load Angular, angular-ui-tinymce, tinymce, etc. Now the ui-tinymce directive seems to no longer be able to setup an editor with the options provided in the directive like language.

Not sure where the problem lies but some how, when the ui-tinymce directive calls tinymce.init() for the <textarea> where the directive is, it ignores the options. Since this is occuring when RequireJS is used, it leads me to thinking that is has something to do with how tinymce, ui-tinymce and angular are being loaded.

In my RequireJS config, I have the following with regards to tinymce which I have seen in answers to how to use tinymce with RequireJS:

requirejs.config({
   baseUrl: '/js',
   paths: {
    tinymce: 'tinymce/tinymce.min',
   },
   shims: {
    'tinymce': {
        exports: 'tinymce',
        init: function () {
            this.tinyMCE.DOM.events.domLoaded = true;
            return this.tinyMCE;
        }
    },
}

Has someone else experienced this problem and can give me pointers to how to solve it?

1

There are 1 best solutions below

0
On

As it turns out, my issue was not related to the use of RequireJS. TinyMCE works fine with both RequireJS and ui-tinymce using the requirejs.config() shown in my question.

My problem had to do with the configuration settings passed to tinymce.init() which were wrong. In the transition to RequireJS, I also modified how the initialization was done and that's how the problem was introduced.