Javascript 如何使用Require.js实现TinyMCE？

我目前正在将TinyMCE源作为依赖项传递，然后调用 tinyMCE.init（{}）；但它不是初始化TinyMCE。当I 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。但在初始化tinyMCE之前，必须等待视图的el插入dom。在javascript中，现在有了一种检测元素何时插入DOM的方法。但是当渲染主干视图（backbone.view.render（））时，元素将在当前浏览器的处理之后插入dom中。使用“setTimeout”以1毫秒的时间初始化微小的mce元素（这将在下一个浏览器进程中简单地执行代码）

var FormTextArea=Backbone.View.extend({
模板：u.模板（“”），
标记名：“textarea”，
类名：“控制组”，
render:function（）{
this.el.html（this.template（this.model.toJSON（））；
setTimeout（u.bind（this.initMCE，this），1）；
归还这个；
},
initMCE:function（）{
init（{selector:'textarea'}）；
}
});
var v=新FormTextArea({
模型：新主干.model（{value:'heading2A段落此处
'}）
});
$（'body'）.append（v.render（）.el）；

下面是一个JSFIDLE：

---

我强烈建议大家不要使用tinymce jquery版本，它有很多缺点，也是一个麻烦源，在键盘输入处理方面尤其慢！这将加载tinyMCE，但tinyMCE.init不会创建编辑器。您将需要一行：

this.tinyMCE.DOM.events.domload=true

before

返回this.tinyMCE（在tinyMCE 4.02b上测试）必须添加一个setTimeout来包装编辑器创建。有什么想法可以让我一次加载所有tinyMCE插件吗？谢谢@ebaranov-这个垫片片段正是我需要的。
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);