Come posso implementare TinyMCE con Require.js?

Question

Attualmente sto passando nell'origine TinyMCE come dipendenza e quindi chiamando tinyMCE.init ({}); ma non sta inizializzando TinyMCE. Quando console.log TinyMCE, restituisce un oggetto TinyMCE. Esempio di codice riportato di seguito:

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

Aveva lo stesso problema. La mia soluzione era usare il plugin jQuery di TinyMCE invece di TinyMCE direttamente. In questo modo funziona bene.

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

Answer 2

È possibile utilizzare 'shim' per requirejs 2.1.0 o superiore, vedi l'esempio di script principale di seguito:

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: ho aggiunto frammento di iimuhin da sotto nei commenti. Non sembra funzionare senza di esso; L'ho aggiunto perché i futuri utenti apprezzeranno evitare il mal di testa aggiunto di IE.

Answer 3

È possibile implementare tinyMCE come al solito in una vista backbone. Ma è necessario attendere che l'el della vista sia inserito nella dom prima di inizializzare tinyMCE. In javascript, c'è ora modo di rilevare quando l'elemento è inserito nel DOM. Tuttavia, quando una vista backbone viene interrotta (Backbone.View.render()), l'elemento verrà inserito nella dom dopo l'attuale processo del browser. Usa un "setTimeout" per inizializzare il piccolo elemento mce con 1 millisecondo (che eseguirà semplicemente il codice nel processo successivo del browser).

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

Ecco un jsfiddle:

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