Làm cách nào để triển khai TinyMCE với Require.js?

Question

Tôi hiện đang chuyển nguồn TinyMCE dưới dạng phụ thuộc và sau đó gọi tinyMCE.init ({}); nhưng nó không khởi tạo TinyMCE. Khi tôi console.log TinyMCE, nó trả về một đối tượng TinyMCE. Mã mẫu bên dưới:

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

Có cùng vấn đề. Giải pháp của tôi là sử dụng TinyMCE jQuery plugin thay vì TinyMCE trực tiếp. Bằng cách này nó hoạt động tốt.

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

Bạn có thể sử dụng 'shim' cho requirejs 2.1.0 hoặc cao hơn, xem ví dụ về kịch bản chính dưới đây:

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

Sửa: Tôi thêm đoạn iimuhin từ dưới đây trong các ý kiến. Dường như nó không hoạt động mà không có nó; Tôi đã thêm nó bởi vì những người tìm kiếm trong tương lai sẽ đánh giá cao việc tránh sự đau đầu của IE.

Answer 3

Bạn có thể thực hiện tinyMCE như thường lệ trong chế độ xem xương sống. Nhưng bạn phải đợi cho đến khi el của khung nhìn được chèn vào trong dom trước khi khởi tạo tinyMCE. Trong javascript, bây giờ có cách để phát hiện khi phần tử được chèn vào DOM. Nhưng khi một khung nhìn backbone được render (Backbone.View.render()), phần tử sẽ được chèn vào dom sau quá trình của trình duyệt hiện tại. Sử dụng "setTimeout" để khởi tạo phần tử mce nhỏ với 1 mili giây (chỉ đơn giản là thực thi mã trong quá trình của trình duyệt tiếp theo).

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

Đây là một jsfiddle:

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