How can I implement TinyMCE with Require.js?

问题:

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);

            }
        });
   }
});

回答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'
   });
});

回答2:

You can use 'shim' for requirejs 2.1.0 or higher, see example of main script below:

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

requirejs([
    'tinyMCE'
], function (tinyMCE) {
    console.log(tinyMCE);

    // your code here
});

Edit: I added iimuhin’s snippet from below in the comments. It doesn’t seem to work without it; I added it because future searchers will appreciate avoiding the added IE headache.

回答3:

You can implement tinyMCE as usual in a backbone view. But you must wait until the view's el is inserted in the dom before initializing tinyMCE. In javascript, there is now way to detect when element is inserted in the DOM. But when a backbone view is rended (Backbone.View.render()), the element will be inserted in the dom after the current browser's process. Use a "setTimeout" to initialize the the tiny mce element with 1 millisecond (which will simply execute the code in the next browser's process).

var FormTextArea = Backbone.View.extend({
    template : _.template('<%=value%>'),
    tagName: 'textarea',
    className: "control-group",
    render: function(){ 
        this.$el.html(this.template(this.model.toJSON()));
        setTimeout(_.bind(this.initMCE, this), 1);
        return this;
    },
    initMCE: function(){
        tinymce.init({selector: 'textarea'});
    }
});

var v = new FormTextArea({
    model: new Backbone.Model({value: '<h2>Heading 2</h2><p>A paragraph here</p>'})
});

$('body').append(v.render().el);

Here is a jsfiddle :

http://jsfiddle.net/pCdSy/10/