CODEWITHSUNDEEP
javascriptextjs4html-editor
T1000
T1000

Reputation: 2941

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

Upvotes: 0

Views: 4410

Answers (3)

Maxim Borodulin
Maxim Borodulin

Reputation: 1

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

Upvotes: 0

Andron
Andron

Reputation: 6631

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

Upvotes: 4

Benno
Benno

Reputation: 3008

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

Upvotes: 0

Related Questions