PDA

View Full Version : HtmlEditor - catch keyPress event



chiqo47
2 Apr 2012, 4:04 AM
Hey

I'm trying to catch a keyPress event inside of HtmlEditors' content (for example TAB button - to not jump out of content... like in this example: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/desktop/desktop.html - Notepad)


Ext.onReady(function() {
Ext.create('Ext.form.HtmlEditor', {
id: 'editor',
width: 580,
height: 250,
renderTo: Ext.getBody(),
});
});
I somehow foud out that if I run the following code in firefox console, it does work...

Ext.get('editor-iframeEl').dom.contentDocument.addEventListener('keypress', function (event){alert(event.keyCode)}, this);
...but I can't add this listener in code. (I tried with afterrender listener, didn't work)
What should I do?
...or if there is a better way to catch pressing keys in htmleditor, please tell me how? :)

scottmartin
3 Apr 2012, 4:27 PM
See if this helps. There seems to be code for Ext4
http://stackoverflow.com/questions/6663730/catch-ctrlenter-when-user-typing-text-in-ext-form-field-htmleditor

Regards,
Scott.

chiqo47
8 Apr 2012, 4:55 PM
Thank you. Your post kind of lead me to the right way.
I noticed that the problem was present only in Firefox. (tab button - leaving the editor, and focusing next component)
In code I stoped the default event, and change it to add some "tab looking" space in it. (like in IE and Opera)
This is the working code:

Ext.require('Ext.form.HtmlEditor');
Ext.define('MyOnlineEditor', { // Creating a new version of HtmlEditor
extend: 'Ext.form.HtmlEditor', // extended from 'Ext.form.HtmlEditor'...
});
Ext.onReady(function() {
Ext.override(MyOnlineEditor, { // Overriding my new editor... (only newly defined can be overriden)
frame : true,
initComponent: function() {
this.callOverridden();
},
initEditor : function() {
this.callOverridden();
var me = this;
var doc = me.getDoc();
if (Ext.isGecko){ // if Firefox
Ext.EventManager.on(doc, 'keypress', me.addTabSpace, me);
}
},
addTabSpace : function(e) {
if (e.TAB == e.getKey()){ //or (e.getKey() == '9') // adding a TAB key event to editor
e.stopEvent(); // preventing default action
this.insertAtCursor('    '); //inserting some 'non-breakable-speaces' instead
}
},
});
Ext.create('MyOnlineEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody(),
});
});
Or full
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/ext-debug.js"></script> <script type="text/javascript"> Ext.require('Ext.form.HtmlEditor'); Ext.define('MyOnlineEditor', { // Creating a new version of HtmlEditor extend: 'Ext.form.HtmlEditor', // extended from 'Ext.form.HtmlEditor'... }); Ext.onReady(function() { Ext.override(MyOnlineEditor, { // Overriding my new editor... (only newly defined can be overriden) frame : true, initComponent: function() { this.callOverridden(); }, initEditor : function() { this.callOverridden(); var me = this; var doc = me.getDoc(); if (Ext.isGecko){ // if Firefox Ext.EventManager.on(doc, 'keypress', me.addTabSpace, me); } }, addTabSpace : function(e) { if (e.TAB == e.getKey()){ //or (e.getKey() == '9') // adding a TAB key event to editor e.stopEvent(); // preventing default action this.insertAtCursor('&nbsp;&nbsp;&nbsp;&nbsp;'); //inserting some 'non-breakable-speaces' instead } }, }); Ext.create('MyOnlineEditor', { width: 580, height: 250, renderTo: Ext.getBody(), }); }); </script></head><body></body></html>
I however stil don't like the way IE, and Opera do the "tab spacing" (with just inserting 4 spaces - &nbsp; )

Instead of adding a '&nbsp;&nbsp;&nbsp;&nbsp;' string, we can add '‚Äč<span class="Apple-tab-span" style="white-space:pre"> </span>' which acctually functions great - as real tab, but in Opera, IE and in my case Firefox, it leaves useless/redundant html code if you delete this tab-space( in text edit mode). So for some use cases it can really be not appropriate.
It works well with Chrome, and Safari.