Wie kann ich TinyMCE mit Require.js implementieren?

Question

Ich gebe gerade die TinyMCE-Quelle als Abhängigkeit weiter und rufe dann tinyMCE.init ({}); aber TinyMCE wird nicht initialisiert. Wenn ich TinyMCE console.log anmelde, wird ein TinyMCE-Objekt zurückgegeben. Codebeispiel unten:

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

Hatte das gleiche Problem. Meine Lösung bestand darin, TinyMCE jQuery Plugin anstelle von TinyMCE direkt zu verwenden. So funktioniert es gut.

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

Sie können 'Shim' verwenden für requirejs 2.1.0 oder höher, beispielsweise von Hauptskript siehe unten:

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

bearbeiten: Ich iimuhin die Schnipsel in den Kommentaren von unten hinzugefügt. Es scheint nicht ohne zu funktionieren; Ich habe es hinzugefügt, weil zukünftige Suchende es schätzen werden, die zusätzlichen IE Kopfschmerzen zu vermeiden.

Answer 3

Sie können tinyMCE wie üblich in einer Backbone-Ansicht implementieren. Sie müssen jedoch warten, bis das El der Ansicht in das Dom eingefügt wird, bevor Sie tinyMCE initialisieren. In Javascript gibt es jetzt eine Möglichkeit zu erkennen, wann ein Element in das DOM eingefügt wird. Wenn jedoch eine Backbone-Ansicht geändert wird (Backbone.View.render()), wird das Element nach dem aktuellen Browserprozess in das Dom eingefügt. Verwenden Sie "setTimeout", um das winzige mce-Element mit 1 Millisekunde zu initialisieren (wodurch der Code einfach im nächsten Browserprozess ausgeführt wird). Hier

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

ist ein jsfiddle:

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