ExtJS HtmlEditor’s broken ordered and unordered list when hitting RETURN
In the ExtJS 3, the HtmlEditor doesn’t insert the next list item when hitting the RETURN key at the end of a list. This bug has been reported in the forum and there are other fixes. Here is my alternate fix.
With this fix, when you hit the return key, a new continued list item is inserted in the next line.
To close the list on Safari, simply click the list button on a empty list line.
Instead of changing the HtmlEditor source code, import the fix by overriding the class method in the beginning.
Ext.override(Ext.form.HtmlEditor, {
fixKeys : function(){
if(Ext.isIE){
return function(e){
var k = e.getKey(),
doc = this.getDoc(),
r;
if(k == e.TAB){
e.stopEvent();
r = doc.selection.createRange();
if(r){
r.collapse(true);
r.pasteHTML(' ');
this.deferFocus();
}
}else if(k == e.ENTER){
r = doc.selection.createRange();
if(r){
var target = r.parentElement();
if(!target || target.tagName.toLowerCase() != 'li'){
e.stopEvent();
r.pasteHTML('<br />');
r.collapse(false);
r.select();
}
}
}
};
}else if(Ext.isOpera){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.win.focus();
this.execCmd('InsertHTML',' ');
this.deferFocus();
}
};
}else if(Ext.isWebKit){
return function(e){
var k = e.getKey();
if(k == e.TAB){
e.stopEvent();
this.execCmd('InsertText','\t');
this.deferFocus();
}else if(k == e.ENTER){
e.stopEvent();
var doc = this.getDoc();
if (doc.queryCommandState('insertorderedlist') ||
doc.queryCommandState('insertunorderedlist')) {
this.execCmd('InsertHTML', '</li><br /><li>');
} else {
this.execCmd('InsertHtml','<br /><br />');
}
this.deferFocus();
}
};
}
}()
});
