当用户在 Ext.form.field.HtmlEditor 中输入文本时，按 Ctrl+Enter答案

【问题标题】：Catch Ctrl+Enter when the user types text in Ext.form.field.HtmlEditor当用户在 Ext.form.field.HtmlEditor 中输入文本时，按 Ctrl+Enter
【发布时间】：2011-10-03 13:43:51
【问题描述】：

当用户在 Ext.form.field.HtmlEditor (xtype:'htmleditor') 中输入文本时按 ctrl+enter 时，我正在尝试发出 ajax 请求，但我不知道该怎么做。
我在“htmleditor”旁边有一个按钮，可以发送“htmleditor”的值，但我想使用 ctrl+enter 为该操作添加键盘快捷键。
将不胜感激。

编辑：它需要使用 ExtJS4 制作 - 不知何故，我必须在我的 htmleditor 对象中添加类似“keypress”侦听器的东西...
这是代码..

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

【问题讨论】：

标签： javascript extjs4 html-editor

【解决方案1】：

您无法在默认 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!');
        }
    }
});

【讨论】：

谢谢，它“破坏”了 htmleditor 的某些部分......当我按下 ctrl+enter 时它会冻结（而不是 alert()）......所以我认为这可能会有所帮助，但我从未使用过 extjs3，而且我对 extjs4 还很陌生，所以你能帮我转换一下吗？
@T1000 - 我已经更新了我的答案，所以你可以尝试正确的 extjs4 版本。
非常感谢安德龙。 +1
谢谢，最后一个对我很有效，非常有用！我也使用： var content = Ext.getCmp('htmlEd').textareaEl.dom.value;获取 htmlEditor 的值。

【解决方案2】：

this 是你所追求的吗（已经在堆栈上：P）？ Ctrl+Enter jQuery in TEXTAREA:

$('#textareaId').keydown(function (e) {
e = e || event; // for compatibility with IE (i belive)
  if (e.ctrlKey && e.keyCode == 13) {
    // Ctrl-Enter pressed
  }
});

【讨论】：

谢谢，但是......我忘了注意它必须用 extjs 完成......不能用 jQuery 完成，而且我没有在任何地方使用#ID（所以 getElementById() 也没有用）。 htmlEditor 对象被赋值给主对象中的变量......类似于 this.htmlEditor。所以我需要获取 this.htmlEditor 的按键事件，但是 xtype:htmleditor 的事件中没有按键事件
啊。嗯，你能修改 textarea HTML 元素吗？你可以这样做 <textarea onkeydown="javascript:checkKeys()"></textarea> function checkKeys() { var e = window.event; if(e.ctrlKey && e.keyCode == 13) runAjax(); } 编辑：啊我看到 o_O 没关系，对不起！其他两个回复可能对此了解更多：p
不是textarea 是extjs4的Ext.form.field.HtmlEditor！

【解决方案3】：

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

【讨论】：