Results 1 to 4 of 4

Thread: Key Binding is not working for HTMLEditor

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Location
    India
    Posts
    18

    Default Answered: Key Binding is not working for HTMLEditor

    I have added the key binding to HtmlEditor,but it is not working.


    Note: For below examples key bind with (CTRL+Q)
    The code below for Htmleditor key binding(Not working)
    Code:
    new Ext.panel.Panel({    title: 'HTML Editor',
        renderTo: Ext.getBody(),
        width: 550,
        height: 250,
        frame: true,
        items: {
            xtype: 'textfield',
            listeners:{'afterrender':function(a){
                var kb=new Ext.util.KeyMap({
                    binding:[{
                                handler:function(key, e){console.log("binding")},
                                ctrl:true,
                                key:[81]
                             }],
                    target:a.getEl()
                    });
                }
           }
        }
    });
    This is same code for Textfield key binding (works fine)
    Code:
    new Ext.panel.Panel({
        title: 'Text Editor',
        renderTo: Ext.getBody(),
        width: 550,
        height: 250,
        frame: true,
        items: {
            xtype: 'htmleditor',
            listeners:{'afterrender':function(a){
                var kb=new Ext.util.KeyMap({
                    binding:[{
                                handler:function(key, e){console.log("binding")},
                                ctrl:true,
                                key:[81]
                             }],
                    target:a.getEl()
                    });
                }
           }
        }
    });

  2. The htmlEditor basically exposes the browsers internal editor in an iframe. So you have to attack it a little differently.

    After some digging around, this seems to work:

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            var hEditor = Ext.create('Ext.form.HtmlEditor', {
                width: 800,
                height: 250,
                renderTo: Ext.getBody()
            });
    
            // source code edit mode
            var map = new Ext.util.KeyMap(hEditor.getEl(), [{
                key: 13,
                ctrl: true,
                fn: function() {
                    alert("Ctrl-Enter was pressed");
                }
            }]);
            
            // normal editing; keypress has to be pronounced
            hEditor.onEditorEvent = function(e){
               var keyCode = (document.layers) ? keyStroke.which : e.keyCode;
                if (keyCode == 81 && e.ctrlKey) { alert("Ctrl-Q was pressed"); }
            }        
            
        }
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    The htmlEditor basically exposes the browsers internal editor in an iframe. So you have to attack it a little differently.

    After some digging around, this seems to work:

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            var hEditor = Ext.create('Ext.form.HtmlEditor', {
                width: 800,
                height: 250,
                renderTo: Ext.getBody()
            });
    
            // source code edit mode
            var map = new Ext.util.KeyMap(hEditor.getEl(), [{
                key: 13,
                ctrl: true,
                fn: function() {
                    alert("Ctrl-Enter was pressed");
                }
            }]);
            
            // normal editing; keypress has to be pronounced
            hEditor.onEditorEvent = function(e){
               var keyCode = (document.layers) ? keyStroke.which : e.keyCode;
                if (keyCode == 81 && e.ctrlKey) { alert("Ctrl-Q was pressed"); }
            }        
            
        }
    });

  4. #3
    Sencha User
    Join Date
    Dec 2013
    Location
    India
    Posts
    18

    Default

    Thanks for the code

  5. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    23
    Answers
    1

    Default

    I tried your code and I was able to popup window( with text input) on the top of html editor on specific event.after writing the text when I close the window , I want the entered text to be inserted in the cursor position.unfortunately, when I close the window the editor is getting the focus but the cursor does not appear and the entered text is not inserted.below is the part of my code

    Code:
    Ext.create('Ext.window.Window', {
    	autoShow: true,
    	title: 'Test',
    	width: 300,
    	height: 150,
    	//				            		bodyPadding: 10,
    	items: [{
    		xtype: 'textfield',
    		fieldLabel: 'Value',
    		emptyText : 'Type your value..'
    	}],
    	listeners: {
    		close: {
    			fn: function (panel, eOpts) {
    				comp.focus();				            					
    				comp.insertAtCursor(panel.down('textfield').getValue());
    	//				            					
    			}
    		}
    	}
    });

Tags for this Thread

Posting Permissions

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