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