Results 1 to 10 of 10

Thread: HtmlEditor key event help

  1. #1

    Default HtmlEditor key event help

    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!

  2. #2

    Default Can you just use the addListener function?

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

    Instead of onClick use onKeyPress, onkeydown, or onkeyup.

  3. #3

    Default

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

    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!

  4. #4

    Default

    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!

  5. #5
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194

    Default

    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.

  6. #6

    Default

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

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,891

    Default

    Quote Originally Posted by MoShAn480 View Post
    Hi, thanks for pointing me to the doc. I have the following code:

    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

  8. #8
    Ext User InKiev's Avatar
    Join Date
    Dec 2007
    Location
    Aguascalientes, Mxico
    Posts
    47

    Default [Solution] HtmlEditor keypress Event

    Hi . .

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

    Code:
    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.

  9. #9

    Default

    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

  10. #10

    Default Fix with EventManager

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

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •