Question

I’m trying to make an Ajax request when the user presses Ctrl + Enter while entering text in Ext.form.field.HtmlEditor (xtype:’htmleditor’), but I don’t know how to do it.

I got a button next to the ‘htmleditor’ which can send the value of the ‘htmleditor’, but I’d like to add a keyboard shortcut for that operation with Ctrl + Enter.

It need to be made with Ext JS 4 – somehow I must add something like ‘keypress’ listener to my htmleditor object…

Here is the code…

this.htmleditor = this.addComment.add({
    region: 'center',
    xtype: 'htmleditor',
    margin: '0 0 0 0',
    enableSourceEdit: false,
    height: 200
});

Answer 1

You cannot listen for events in the default htmleditor. So you need use an updated version of it.

This code can help you (it is for Ext JS 3, so maybe you need change it for version 4):

Cyber.ui.HtmlEditor = Ext.extend(Ext.form.HtmlEditor, {
        frame : true,
        initComponent : function() {
            Cyber.ui.HtmlEditor.superclass.initComponent.call(this);
            this.addEvents('submit');
        },
        initEditor : function() {
           Cyber.ui.HtmlEditor.superclass.initEditor.call(this);
            if (Ext.isGecko) {
                Ext.EventManager.on(this.doc, 'keypress', this.fireSubmit,
                        this);
            }
            if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
                Ext.EventManager.on(this.doc, 'keydown', this.fireSubmit,
                        this);
            }
        },
        fireSubmit : function(e) {
            if (e.ctrlKey && Ext.EventObject.ENTER == e.getKey()) {
                // Do what you need here
            }
        }
});

Ext.reg('customeditor', Cyber.ui.HtmlEditor);

And in your form:

this.htmleditor = this.addComment.add({
    region: 'center',
    xtype: 'customeditor',
    margin: '0 0 0 0',
    enableSourceEdit: false,
    height: 200
});

---

I played a lot with Ext JS 4 and found the way (you need just include this code before you’ll use htmleditor):

Ext.form.HtmlEditor.override({
    frame : true,
    initComponent: function() {
        this.callOverridden();
        this.addEvents('submit');
    },

    initEditor : function() {
        this.callOverridden();

        var me = this;
        var doc = me.getDoc();

        if (Ext.isGecko) {
            Ext.EventManager.on(doc, 'keypress', me.fireSubmit, me);
        }

        if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
            Ext.EventManager.on(doc, 'keydown', me.fireSubmit, me);
        }
    },

    fireSubmit : function(e) {
        if (e.ctrlKey && Ext.EventObject.ENTER == e.getKey()) {
            // Do what you need here
            alert('yes!');
        }
    }
});