11

現在、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);

            }
        });
   }
});
4

3 に答える 3

34

requirejs2.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の頭痛の種を回避することを高く評価するため、これを追加しました。

于 2013-03-12T14:13:47.300 に答える
6

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

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-06T08:12:21.803 に答える
0

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

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-26T19:29:44.450 に答える