¿Cómo puedo implementar TinyMCE con Require.js?

Question

Actualmente estoy pasando la fuente TinyMCE como una dependencia, y luego llamando al tinyMCE.init ({}); pero no está inicializando TinyMCE. Cuando console.log TinyMCE, devuelve un objeto TinyMCE. Ejemplo de código a continuación:

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

Tenía el mismo problema. Mi solución fue utilizar el complemento jQuery TinyMCE en lugar de TinyMCE directamente. De esta manera funciona bien.

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

Puede utilizar 'cuña' para RequireJS 2.1.0 o superior, véase el ejemplo de script principal a continuación:

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

Edición: He añadido de iimuhin fragmento desde abajo en los comentarios. No parece funcionar sin eso; Lo agregué porque los buscadores futuros apreciarán evitar el dolor de cabeza adicional de IE.

Answer 3

Puede implementar tinyMCE como de costumbre en una vista de red troncal. Pero debes esperar hasta que el elé de la vista se inserte en el dom antes de inicializar el tinyMCE. En javascript, ahora hay forma de detectar cuándo se inserta el elemento en el DOM. Pero cuando se renderiza una vista de red troncal (Backbone.View.render()), el elemento se insertará en el dom después del proceso actual del navegador. Use un "setTimeout" para inicializar el pequeño elemento mce con 1 milisegundo (que simplemente ejecutará el código en el siguiente proceso del navegador).

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

Aquí es una jsFiddle:

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