如何使用Require.js实现TinyMCE？
我目前正在将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); } }); } }); 有同样的问题。 我的解决方案是直接使用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' }); });
您可以对requirejs 2.1.0或更高版本使用’shim’，请参阅下面的主脚本示例：
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头痛。
您可以像往常一样在骨干视图中实现tinyMCE。 但是你必须等到视图的el被插入到dom中才能初始化tinyMCE。 在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: 'Heading 2
A paragraph here
'}) }); $('body').append(v.render().el);
这是一个jsfiddle：