Require.jsでTinyMCEを実装するにはどうすればよいですか？

Question

私は現在依存関係としてTinyMCEソースを渡していて、次に を呼び出します。tinyMCE.init（{}）;それはTinyMCEを初期化していません。私がconsole.log TinyMCEを実行すると、TinyMCEオブジェクトが返されます。下のコードサンプル：

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

同じ問題がありました。私の解決策は、TinyMCEの代わりにTinyMCE jQueryプラグインを直接使用することでした。これはうまく動作します。

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

編集：

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

あなたはrequirejs 2.1.0以上のための「シム」を使用することができ、以下の主なスクリプトの例を参照してください、私はコメントで、下からのiimuhinスニペットを追加しました。それがなければうまくいかないようです。私はそれを追加しました。なぜなら、将来の検索ユーザーは、追加されたIEの頭痛を避けることに感謝するからです。

Answer 3

バックボーンビューではい​​つものようにtinyMCEを実装できます。しかし、tinyMCEを初期化する前に、ビューのelがdomに挿入されるまで待つ必要があります。 javascriptでは、要素がDOMに挿入されたときを検出する方法が追加されました。しかし、バックボーン・ビューがレンダリングされると（Backbone.View.render（））、要素は現在のブラウザーのプロセスの後にdomに挿入されます。 "setTimeout"を使用して、1ミリ秒で小さなmce要素を初期化します（次のブラウザのプロセスでコードを実行するだけです）。ここで

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

はjsfiddleです：

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