Results 1 to 7 of 7

Thread: HtmlEditor insertAtCursor Fails in IE11 and ExtJS 3.4.2

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJSIII-212 in 3.4.3.
  1. #1
    Sencha Premium Member
    Join Date
    Aug 2007
    Posts
    26

    Default HtmlEditor insertAtCursor Fails in IE11 and ExtJS 3.4.2

    I'm a licensed user using ExtJS 3.4.2 which fixed almost all of the IE11 errors we has encountered with 3.4.0, but we recently had a bug report from a customer that identified a problem with the HtmlEditor control when you try to use the insertAtCursor method. This works properly in previous versions of IE and in all other browsers that we've tried. I've tried to find a fix myself by messing with the insertAtCursor code, but so far have come up empty.

    I've creates a demonstration of this at: http://jsfiddle.net/mlavender/aEWB7/

    I know this example is 3.4.0, but 3.4.2 isn't available on JSFiddle and the same behavior occurs using 3.4.2.

    Code:
    Ext.onReady(function() {
        var htmlEditor = new Ext.form.HtmlEditor({
            width: 400,
            height: 200
        });
        new Ext.FormPanel({
            renderTo: Ext.getBody(),
            bodyStyle: 'padding: 5px 5px 0 5px;',
            items: [htmlEditor, {
                xtype: 'button',
                text: 'Insert Text',
                handler: function() {
                    htmlEditor.focus();
                    htmlEditor.insertAtCursor('This is a test');
                }
            }
            ]
        });
    });
    This is the only IE11 defect we have left since we upgraded to 3.4.2 and a fix would really be great.

    Thank you

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    ExtJS 3.4.2 doesn't have IE11 browser detection integrated out of the box. You say your example works with IE10, though?

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2007
    Posts
    26

    Default

    ExtJS 3.4.2 definitely addressed all of the issues we were having with IE11, with the exception of the insertAtCursor issue. That problem only exists in IE11, and doesn't occur with other browsers or any previous version of IE (including 10) so far as I can tell. You can try the Fiddle I created to test -- I've noticed it helps to type some text into the editor field first then hit the Paste button, but it does work in all browsers/versions other than IE11.

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2007
    Posts
    26

    Default

    Any follow-up on this? Have you been able to reproduce with the example I provided?

  5. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

    This may have to do with the useragent checking for IE11 which is part of what is not built into ExtJS 3.x at this time.

  6. #6
    Sencha User gtibrett's Avatar
    Join Date
    Aug 2007
    Location
    Arlington, VA
    Posts
    1

    Default

    I think I have a solution to this problem.

    I am using this to check for IE11

    Code:
    Ext.isIE11 = !!navigator.userAgent.match(/Trident/) && !!navigator.userAgent.match(/rv:11/);
    And this is my replacement for insertAtCursor

    Code:
    insertAtCursor : function(text) {
    	if (!this.activated) {
    		return;
    	}
    	if (Ext.isIE) {
    		this.win.focus();
    		var doc = this.getDoc(), r = doc.selection.createRange();
    		if (r) {
    			r.pasteHTML(text);
    			this.syncValue();
    			this.deferFocus();
    		}
    	} else if (Ext.isIE11) {
    		this.win.focus();
    		var doc = this.getDoc(), r = doc.getSelection().getRangeAt(0);
    		if (r) {
    			var fragment	= r.createContextualFragment(text);
    			
    			doc.body.appendChild(fragment);
    			
    			this.syncValue();
    			this.deferFocus();
    		}
    	}
    	else {
    		this.win.focus();
    		this.execCmd('InsertHTML', text);
    		this.deferFocus();
    	}
    }
    Some reference material:
    https://developer.mozilla.org/en-US/...extualFragment
    http://stackoverflow.com/questions/1...cumentfragment

  7. #7
    schoterson's Avatar
    Join Date
    Mar 2007
    Location
    Los Altos, CA (South of SF)
    Posts
    25

    Default Same problem here

    This issue seems to exist in EXTJS 4.1.0 as well, was there ever a fix from the Sencha team for this?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •