Extjs4 将tinyMCE 4集成到extJS 4中

由于tinyMCE 4与以前的版本相比有很大的变化，是否有人已经尝试将extjs 4.*集成到tinyMCE的新版本中？

基本集成非常简单：

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

示例用法（）：

Ext.widget（'window'{
宽度：400
，身高：350
，布局：'form'
，项目：[{
xtype:'textfield'
，字段标签：“Foo”
}, {
xtype:“tinymce”
，id:'tinyEditor'
，字段标签：'Bar'
，值：'Foo
Bar
'
，听众：{
更改：函数（me、newValue、oldValue）{
log（'内容更改：'+oldValue+'=>'+newValue）；
}
，blur:function（）{console.log（'editor fulled'）；}
，focus:function（）{console.log（'editor focused'）；}
}
}]
，bbar:[{
文本：“获取值”
，handler:function（）{
var e=Ext.getCmp（'tinyEditor'）；
警报（如getValue（））；
}
}]
});

我已经为TinyMCE 4.0.20创建了一个Ext 4.2.1插件，以及一个相关的Sencha Architect扩展，可以轻松地将TinyMCE插入您的Ext 4应用程序

此处介绍了完整的详细信息，以及到GIT存储库的链接：

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