当用户在 Ext.form.field.HtmlEditor 中键入文本时捕获 Ctrl+Enter

Question

当用户按下 时，我尝试发出 Ajax 请求在 Ext.form.field.HtmlEditor (xtype:'htmleditor') 中输入文本时按 Ctrl + Enter，但我不知道该怎么做。

我在“htmleditor”旁边有一个按钮，可以发送“htmleditor”的值，但我想使用 Ctrl + EnterCtrl 为该操作添加键盘快捷键kbd>。

它需要用 Ext JS 4 制作 - 不知怎的，我必须添加类似的东西我的 htmleditor 对象的“keypress”监听器...

这是代码...

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

Answer 1

您无法在默认 htmleditor 中监听事件。所以你需要使用它的更新版本。

此代码可以帮助您（它适用于 Ext JS 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
});

---

我玩了很多 Ext JS 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!');
        }
    }
});

Answer 2

这可能就是您想要的（已经在 Stack Overflow 上）：< a href="https://stackoverflow.com/questions/1684196/ctrlenter-jquery-in-textarea">在 TEXTAREA 中使用 jQuery Ctrl + Enter：

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

Answer 3

这适用于 Ext JS 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
           });
       }
    }
});