HtmlEditor key event help

[MoShAn480]

Hi,

I am trying to listen for certain key events (like pressing enter, esc, etc) when the HtmlEditor is being used. I do not see anything in the docs how to go about doing this? Let me know if anyone has done something similar and can point me in the right direction...thanks!

[ohhowihateie]

http://extjs.com/deploy/ext/docs/out...ml#addListener

Instead of onClick use onKeyPress, onkeydown, or onkeyup.

[MoShAn480]

Hi, thanks for pointing me to the doc. I have the following code:

var htmlEditor = new Ext.form.HtmlEditor({
                        id:'agentMessageBox_' + sessionTabId,
                        enableLists: false,
                        enableAlignments: false,
                        enableSourceEdit: false
            });
            htmlEditor.render(panel.el);
            var tb = htmlEditor.getToolbar();
            if (Ext.isIE || Ext.isIE7){
                tb.addSeparator();
                var spellBtn = new Ext.ToolbarButton ({
                        icon: 'images/icons/spellcheck.gif', // icons can also be specified inline
                        id: 'spelling',
                        cls: 'x-btn-text-icon',
                        tooltip: '<b>Spell Checker</b><br/>Check your spelling.',
                        handler:doIESpellCheck,
                        disabled :true

                });
                tb.addButton (spellBtn);
            }
            htmlEditor.setSize(panel.el.getWidth(),panel.el.getHeight()-1);
            panel.on('resize',function (self,w,h) {htmlEditor.setSize(w,h-1);});
            
            htmlEditor.addListener('onkeypress', function (event){
                       alert("event: " + event);
            }, this);

The editor render's and operates fine, just that the above event never fires when i type. Am i missing something? Thanks in advance!

[MoShAn480]

Still no luck with this one....
Please let me know if there is anyone out there who has found a work around to this. Thanks!

[Rowan]

Youd need to add the listeners on the Iframe not on the current doc - you are using two pages now not one as the HTML editor has to load in an iframe, try using a superclass and editing the way it works so you are adding in the listeners on the iframe.

[MoShAn480]

Hi, I am not sure i understand. Could you elaborate more or possibly post some sample code? Thanks.

[Animal]

Hi, thanks for pointing me to the doc. I have the following code:

var htmlEditor = new Ext.form.HtmlEditor({
                        id:'agentMessageBox_' + sessionTabId,
                        enableLists: false,
                        enableAlignments: false,
                        enableSourceEdit: false
            });
            htmlEditor.render(panel.el);
            var tb = htmlEditor.getToolbar();
            if (Ext.isIE || Ext.isIE7){
                tb.addSeparator();
                var spellBtn = new Ext.ToolbarButton ({
                        icon: 'images/icons/spellcheck.gif', // icons can also be specified inline
                        id: 'spelling',
                        cls: 'x-btn-text-icon',
                        tooltip: '<b>Spell Checker</b><br/>Check your spelling.',
                        handler:doIESpellCheck,
                        disabled :true

                });
                tb.addButton (spellBtn);
            }
            htmlEditor.setSize(panel.el.getWidth(),panel.el.getHeight()-1);
            panel.on('resize',function (self,w,h) {htmlEditor.setSize(w,h-1);});
            
            htmlEditor.addListener('onkeypress', function (event){
                       alert("event: " + event);
            }, this);

The editor render's and operates fine, just that the above event never fires when i type. Am i missing something? Thanks in advance!

The HtmlEditor does not offer a "keypress" event.

http://extjs.com/deploy/ext/docs/out...or.html#events

Try creating a KeyMap from the HtmlEditor's element:

http://extjs.com/deploy/ext/docs/output/Ext.KeyMap.html

http://extjs.com/deploy/ext/docs/out...tor.html#getEl

[InKiev]

Hi . .

I'm use the code below to catch the events:

if (Ext.isIE) {
        ///////////////IE///////////////////////////////
        iframe = Editor.container.dom.childNodes[0].lastChild.contentWindow.document;
        iframe.attachEvent('onkeypress', function (event){}, this);
    } else {
        //////////////Mozilla///////////////////////////
        iframe = Editor.container.dom.childNodes[0].lastChild.contentDocument;
        iframe.addEventListener('keypress', function (event){}, this);
    }

I hope it will be able to help you.

[careprad]

this will do the work:
[CODE]
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) {
[COLOR=Blue]if (e.ctrlKey

[guillermoabbona]

I added to the HtmlEditor initialize event, the keypress event pointing to the iframe element. I used the Ext.EventManager, like the following:

//inside the initialize event
Ext.EventManager.addListener(editor.iframeEl.dom.contentWindow, 'keyup', function (e) {
            console.log(e.getKey());
        });