如何使用Require.js實現TinyMCE？

我正在傳遞TinyMCE源作爲依賴項，然後調用 tinyMCE.init（{}）;但它並未初始化TinyMCE。當我console.log TinyMCE時，它返回一個TinyMCE對象。代碼示例如下：如何使用Require.js實現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); 

      } 
     }); 
    } 
});

來源

2012-07-05 user784756

有同樣的問題。我的解決方案是直接使用TinyMCE jQuery插件而不是TinyMCE。這樣它工作正常。

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

來源

2012-07-06 08:12:21

我強烈建議大家不要使用TinyMCE的jQuery的構建，它有很多缺點，是禍水，這是特別慢，當談到到鍵盤輸入處理！ – Thariama 2012-07-06 09:23:05

您可以使用requirejs 2.1.0或更高版本「墊片」，見下面的例子主要腳本：

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

編輯：我添加iimuhin的片段從下面的評論。沒有它似乎沒有工作;我添加了它，因爲未來的搜索者會喜歡避免增加的IE頭痛。

來源

2013-03-12 14:13:47 ebaranov

+14

這將加載tinyMCE，但tinyMCE.init不會創建編輯器。您需要：'this.tinyMCE.DOM.events.domLoaded = true;''return this.tinyMCE;'之前'（在tinyMCE 4.02b上測試） – 2013-04-25 13:58:59

必須添加一個setTimeout來包裝編輯器創建以及所有這個。 – user1323136 2013-10-22 07:33:28

任何想法我怎麼能一次加載所有的tinyMCE插件？ – Paul 2014-05-08 12:50:07

您可以在骨幹視圖中照常執行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/

來源

2015-08-26 19:29:44 Simmoniz

如何使用Require.js實現TinyMCE？

回答

相關問題