Skip to content

June 24, 2011

ExtJS HtmlEditor’s broken ordered and unordered list when hitting RETURN

by Joe Kuan

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','&nbsp;&nbsp;&nbsp;&nbsp;');
                    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();
                }
             };
        }
    }()
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: