將tinyMCE 4集成到extJS中4

Question

由於tinyMCE 4與以前的版本相比有很大的變化，有人已經試圖將extjs 4. *集成到新版本的tinyMCE中嗎？

Answer 1

基本集成是非常簡單的實現：

Ext.define('TinyMceField', { 
    extend: 'Ext.form.field.TextArea' 
    ,alias: 'widget.tinymce' 

    /** 
    * TinyMCE editor configuration. 
    * 
    * @cfg {Object} 
    */ 
    ,editorConfig: undefined 

    ,afterRender: function() { 
     this.callParent(arguments); 

     var me = this, 
      id = this.inputEl.id; 

     var editor = tinymce.createEditor(id, Ext.apply({ 
      selector: '#' + id 
      ,resize: false 
      ,height: this.height 
      ,width: this.width 
      ,menubar: false 
     }, this.editorConfig)); 

     this.editor = editor; 

     // set initial value when the editor has been rendered    
     editor.on('init', function() { 
      editor.setContent(me.value || ''); 
     }); 

     // render 
     editor.render(); 

     // --- Relay events to Ext 

     editor.on('focus', function() { 
      me.previousContent = editor.getContent(); 
      me.fireEvent('focus', me); 
     }); 

     editor.on('blur', function() { 
      me.fireEvent('blur', me); 
     }); 

     editor.on('change', function(e) { 
      var content = editor.getContent(), 
       previousContent = me.previousContent; 
      if (content !== previousContent) { 
       me.previousContent = content; 
       me.fireEvent('change', me, content, previousContent); 
      } 
     }); 
    } 

    ,getRawValue: function() { 
     var editor = this.editor, 
      value = editor && editor.initialized ? editor.getContent() : Ext.value(this.rawValue, ''); 
     this.rawValue = value; 
     return value; 
    } 

    ,setRawValue: function(value) { 
     this.callParent(arguments); 

     var editor = this.editor; 
     if (editor && editor.initialized) { 
      editor.setContent(value); 
     } 

     return this; 
    } 
}); 

用法示例（see fiddle）：

Ext.widget('window', { 
    width: 400 
    ,height: 350 
    ,layout: 'form' 
    ,items: [{ 
     xtype: 'textfield' 
     ,fieldLabel: 'Foo' 
    }, { 
     xtype: 'tinymce' 
     ,id: 'tinyEditor' 
     ,fieldLabel: 'Bar' 
     ,value: '<p>Foo</p><p><strong>Bar</strong></p>' 
     ,listeners: { 
      change: function(me, newValue, oldValue) { 
       console.log('content changed: ' + oldValue + ' => ' + newValue); 
      } 
      ,blur: function() { console.log('editor blurred'); } 
      ,focus: function() { console.log('editor focused'); } 
     } 
    }] 
    ,bbar: [{ 
     text: 'Get value' 
     ,handler: function() { 
      var e = Ext.getCmp('tinyEditor'); 
      alert(e.getValue()); 
     } 
    }] 
}); 

Answer 2

我創建了一個分機4.2.1插件TinyMCE的4.0.20以及一個相關的Sencha Architect擴展，可輕鬆將TinyMCE插入到您的Ext 4應用程序中。

全部細節在此說明，鏈接到Git倉庫沿着：

http://druckit.wordpress.com/2014/03/30/integrating-ext-js-4-and-the-tinymce-4-rich-text-wysiwyg-editor/