PDA

View Full Version : Key Binding is not working for HTMLEditor



yuvabarath
5 Feb 2014, 2:24 AM
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)
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)
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()
});
}
}
}
});

scottmartin
6 Feb 2014, 8:38 AM
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:



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"); }
}

}
});

yuvabarath
6 Feb 2014, 10:23 PM
Thanks for the code

naimjs
13 Jun 2014, 5:14 AM
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



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());
//
}
}
}
});