[OPEN-688] HtmlEditor jumps to top on first focus in firefox

**mschering** · 5 Mar 2010 1:32 PM

When you load a htmleditor with some html like

HTML Code:

<font face="arial">
Dear John,



Best regards,
Merijn
</font>

And you place the cursor at the word "cursor", the cursor will jump to the top and you will start typing before the <font> tag:

HTML Code:

typing starts here<font face="arial">
Dear John,



Best regards,
Merijn
</font>

This is very annoying for sending e-mail messages. This only happens on the first focus and happens because of the part to fix silly Gecko errors in the HtmlEditor source code:

PHP Code:


onFirstFocus : function(){

        this.activated = true;

        this.tb.items.each(function(item){

           item.enable();

        });

        if(Ext.isGecko){ // prevent silly gecko errors

            this.win.focus();

            var s = this.win.getSelection();

            if(!s.focusNode || s.focusNode.nodeType != 3){

                var r = s.getRangeAt(0);

                r.selectNodeContents(this.getEditorBody());

                r.collapse(true);

                this.deferFocus();

            }

            try{

                this.execCmd('useCSS', true);

                this.execCmd('styleWithCSS', false);

            }catch(e){}

        }

        this.fireEvent('activate', this);

    }

I tried commenting out:

PHP Code:


/*var s = this.win.getSelection();

            if(!s.focusNode || s.focusNode.nodeType != 3){

                var r = s.getRangeAt(0);

                r.selectNodeContents(this.getEditorBody());

                r.collapse(true);

                this.deferFocus();

            }*/

And then this behaviour is gone. I didn't notice any silly Gecko errors. Is this part really necessary or can it be worked around?

Thanks!
Merijn Schering

**Jamie Avins** · 5 Mar 2010 4:21 PM

Can you follow the guidelines from http://www.extjs.com/forum/showthread.php?t=71015 for your bug report.

What version of FF are you having issues with? A runnable example is always a good idea as well.

**mschering** · 5 Mar 2010 11:43 PM

I was writing a simple example and couldn't replicate the bug. It must be something with my app. I'll do some further digging. Thanks for your help.

**mschering** · 6 Mar 2010 2:44 AM

I tested with Firefox 3.5.8 and I'm pretty sure it happened when I was using ff 3.0.17 too.

I did some more testing and now I was able to replicate it. It only happens when you put the cursor on an empty line. But in case of an e-mail with a salutation and greeting I always do this. But with the text cursor in it in didn't happen. Try this example (put it in the examples folder of ext 3.1.1):

HTML Code:

<html>

<head>

    <title>HTML editor</title>

    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>



    <!-- GC -->

    <!-- LIBS -->

    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>

    <!-- ENDLIBS -->



    <script type="text/javascript" src="../ext-all.js"></script>



    <script type="text/javascript">
	
	Ext.onReady(function(){

		new Ext.form.HtmlEditor({						
			hideLabel:true,
			anchor:'100%',
			xtype:'htmleditor',
			value:'<font face="arial" size="3">Dear John,<br /><br /><br /><br />Best regards,<br />Merijn</font>',
			renderTo:Ext.getBody()
		});
	});

    </script>

  



</head>

<body>



</body>

</html>

Put the cursor on an empty line between Dear John and best regards and start typing and the bug happens.

**mschering** · 6 Mar 2010 7:12 AM

As a workaround I've overridden this function:

PHP Code:


onFirstFocus : function(){

        this.activated = true;

        this.tb.items.each(function(item){

           item.enable();

        });

        if(Ext.isGecko){ // prevent silly gecko errors

            this.win.focus();

            var s = this.win.getSelection();



            /*if(!s.focusNode || (s.focusNode.nodeType != 3 && s.focusNode.nodeName!='BODY')){

                var r = s.getRangeAt(0);

                r.selectNodeContents(this.getEditorBody());

                r.collapse(true);

                this.deferFocus();

            }*/

            try{

                this.execCmd('useCSS', true);

                this.execCmd('styleWithCSS', false);

            }catch(e){}

        }

        this.fireEvent('activate', this);

    }

and commented out the range collapse part. It seems to do the trick and I don't get any errors on firefox 3.5.8.

**diovani** · 12 Aug 2010 4:38 AM

Hey, there is a minor fix here:
http://www.sencha.com/forum/showthre...391#post263391

Use Ext.override().

[OPEN-688] HtmlEditor jumps to top on first focus in firefox

Thread Tools

Search Thread

Display

[OPEN-688] HtmlEditor jumps to top on first focus in firefox

[OPEN-688] HtmlEditor jumps to top on first focus in firefox