Поймайте Ctrl + Enter, когда пользователь вводит текст в Ext.form.field.HtmlEditor

Я пытаюсь сделать запрос ajax, когда пользователь нажимает ctrl + enter при вводе текста в Ext.form.field.HtmlEditor (xtype: 'htmleditor'), но я не знаю, как это сделать.
I ' есть кнопка рядом с «htmleditor», которая может отправлять значение «htmleditor», но я хотел бы добавить сочетание клавиш для этой операции с помощью ctrl + enter.
Буду признателен за некоторую помощь.

РЕДАКТИРОВАТЬ: Это нужно сделать с помощью ExtJS4 - каким-то образом я должен добавить что-то вроде прослушивателя 'keypress' к моему объекту htmleditor ...
Вот код ..

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

person T1000    schedule 12.07.2011    source источник


Ответы (3)


Вы не можете прослушивать события в htmleditor по умолчанию. Поэтому вам нужно использовать его обновленную версию.

Этот код может вам помочь (он предназначен для extjs 3, поэтому, возможно, вам нужно изменить его для версии 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);

И в вашей форме:

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

Я много играл с Extjs 4 и нашел способ (вам нужно просто включить этот код, прежде чем использовать 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!');
        }
    }
});
person Andron    schedule 12.07.2011
comment
Спасибо, он ломает некоторые части htmleditor ... и он зависает (insteat of alert ()), когда я нажимаю ctrl + enter ... поэтому я думаю, что, возможно, это поможет, но я никогда не работал с extjs3, и я ' m новичок в extjs4, можете ли вы мне помочь с преобразованием? - person T1000; 12.07.2011
comment
@ T1000 - Я обновил свой ответ, поэтому вы можете попробовать правильную версию для extjs4. - person Andron; 12.07.2011
comment
Большое спасибо, Андрон. +1 - person T1000; 13.07.2011
comment
Спасибо, у меня последний работает хорошо, очень полезно! Я также использую: var content = Ext.getCmp ('htmlEd'). TextareaEl.dom.value; чтобы получить значение htmlEditor. - person JayCrossler; 29.08.2011

это то, что вам нужно (уже было в стеке: P)? Ctrl + Enter jQuery в TEXTAREA:

$('#textareaId').keydown(function (e) {
e = e || event; // for compatibility with IE (i belive)
  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl-Enter pressed
  }
});
person Benno    schedule 12.07.2011
comment
Спасибо, но ... Я забыл отметить, что это должно быть сделано с помощью extjs ... не может быть выполнено с помощью jQuery, и я нигде не использую #ID (поэтому getElementById () также бесполезен). Объект htmlEditor назначается переменной в основном объекте ... что-то вроде this.htmlEditor. Поэтому мне нужно получить событие нажатия клавиши для this.htmlEditor, но в событиях xtype: htmleditor нет события нажатия клавиши - person T1000; 12.07.2011
comment
Ах. Хммм, а можно ли изменить HTML-элемент textarea? Вы могли бы просто сделать <textarea onkeydown="javascript:checkKeys()"></textarea> function checkKeys() { var e = window.event; if(e.ctrlKey && e.keyCode == 13) runAjax(); } Edit: ах, я вижу, о_О неважно, извините! Эти два других ответа могут знать об этом больше: p - person Benno; 12.07.2011
comment
Это НЕ текстовое поле. Это Ext.form.field.HtmlEditor extjs4! - person T1000; 12.07.2011

Работает для ExtJs 6 (пример отключает клавишу Enter):

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
           });
       }
    }
});
person Maxim Borodulin    schedule 15.12.2020