Question

I am currently passing in the TinyMCE source as a dependency, and then calling
tinyMCE.init({}); but it is not initializing TinyMCE. When I console.log TinyMCE, it returns a TinyMCE Object. Code sample below:

define([
'jQuery',
'Underscore',
'Backbone',
'TinyMCE'
], function($, _, Backbone, tinyMCE) {

        tinyMCE.init({
            mode: "exact",
            elements: $('textarea'),
            theme: "advanced",
            theme_advanced_toolbar_location: 'top',
            theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink',
            theme_advanced_buttons2: '',
            theme_advanced_buttons3: '',
            theme_advanced_toolbar_align: 'left',
            plugins: 'paste,inlinepopups',
            width: '100%',
            height: textarea.attr('data-height'),
            oninit: function () {
                console.log('TargetTD :');
                console.log(targetTD);

            }
        });
   }
});

Answer 1

Had the same problem. My solution was to use TinyMCE jQuery plugin instead of TinyMCE directly. This way it works fine.

define(['jquery', 'tiny_mce/jquery.tinymce'], function ($) {
    $('textarea').tinymce({
        script_url : 'js/tiny_mce/tiny_mce.js',
        theme : 'advanced',
        theme_advanced_buttons1 : 'fontselect,fontsizeselect,forecolor,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,removeformat,indent,outdent,numlist,bullist,copy,paste,link',
        theme_advanced_buttons2 : '',
        theme_advanced_buttons3 : '',
        theme_advanced_toolbar_location : 'top',
        theme_advanced_toolbar_align : 'left'
   });
});