Catch Ctrl+Enter when the user types text in Ext.form.field.HtmlEditor

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 'html开发者_如何学Goeditor' 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
});

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

This may be what you're after (was already on Stack Overflow): Ctrl + Enter using jQuery in a TEXTAREA:

$('#textareaId').keydown(function (e) {
e = e || event; // For compatibility with Internet Explorer (I believe)
  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl + Enter pressed
  }
});

This worked for Ext JS 6 (the example disables the Enter key):

Ext.create('Ext.form.HtmlEditor', {
    width: 580,
    height: 250,
    renderTo: Ext.getBody(),
    listeners:{
       initialize: function(editor){
           const doc = editor.getDoc();
           const docEl = Ext.get(doc);
           docEl.on({
              keypress: (e)=>{
                if (e.event.code === 'Enter'){
                  e.preventDefault();
                }
              },
              delegated:false,
              scope: editor
           });
       }
    }
});