[FIXED][3.0.0] Ext.HtmlEditor.insertAtCursor and Chrome

[netski]

Hello,

No implementation in the function for Chrome:

    /**
     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
     * to insert text.
     * @param {String} text
     */
    insertAtCursor : function(text){
        if(!this.activated){
            return;
        }
        if(Ext.isIE){
            this.win.focus();
            var r = this.doc.selection.createRange();
            if(r){
                r.collapse(true);
                r.pasteHTML(text);
                this.syncValue();
                this.deferFocus();
            }
        }else if(Ext.isGecko || Ext.isOpera || Ext.isChrome){
            this.win.focus();
            this.execCmd('InsertHTML', text);
            this.deferFocus();
        }else if(Ext.isWebKit){
            this.execCmd('InsertText', text);
            this.deferFocus();
        }
    },

Cheers,
Timothy

[mjlecomte]

Thanks for your report.

[mystix]

the OP is incorrect. Chrome is WebKit.

[evant]

@OP: Is this actually causing an issue, or is this just from looking at the code?

[netski]

@OP: Is this actually causing an issue, or is this just from looking at the code?

IS actually causing an issue my example corrected it

[mystix]

IS actually causing an issue my example corrected it

that doesn't make sense. Chrome uses the WebKit engine, which supports

someIframe.document.execCmd('InsertText', text);

what's the exact error message you're seeing in the Chrome js console?

[netski]

that doesn't make sense. Chrome uses the WebKit engine, which supports

someIframe.document.execCmd('InsertText', text);

what's the exact error message you're seeing in the Chrome js console?

Hmm, I'm not receiving any errors. The conditions of the function were not evaluating true, I placed a couple alert()'s to confirm. I'll confirm again today.

Cheers,
Timothy

[mjlecomte]

If you are experiencing an issue, please post a test case of some working code which illustrates the problem. Format for a test case:
http://extjs.com/learn/Ext_Forum_Hel...rking_showcase

[VinylFox]

Wish the OP had followed up on this, but I have run into this issue (err, or something similar?) as well, so Ill hijack this bug.

Problem: The InsertText Midas command in Chrome htmlencodes the value before inserting it, which will of course mess up any html elements you try to insert via the insertAtCursor handler.

Solution: Chrome can handle the InsertHTML Midas command, so why not use that instead which will take care of both cases when you want to insert just text or html elements and text.

This override appears to fix the problem:

Ext.override(Ext.form.HtmlEditor, {
	insertAtCursor : function(text){
	    if(!this.activated){
	        return;
	    }
	    if(Ext.isIE){
	        this.win.focus();
	        var r = this.doc.selection.createRange();
	        if(r){
	            r.collapse(true);
	            r.pasteHTML(text);
	            this.syncValue();
	            this.deferFocus();
	        }
	    }else if(Ext.isGecko || Ext.isOpera || Ext.isWebKit){
	        this.win.focus();
	        this.execCmd('InsertHTML', text);
	        this.deferFocus();
	    }
	}
});

Tested in these browsers (All on Vista):

• FireFox 3.5 (30729)
• Internet Explorer 8 (18783)
• Chrome 2 (172.33)
• Safari 4.0 (530.17)
• Opera 9.64 (10487)

Here is a test case which can replace the examples/form/anchoring.js files contents.

Ext.override(Ext.form.HtmlEditor, {
	insertAtCursor : function(text){
	    if(!this.activated){
	        return;
	    }
	    if(Ext.isIE){
	        this.win.focus();
	        var r = this.doc.selection.createRange();
	        if(r){
	            r.collapse(true);
	            r.pasteHTML(text);
	            this.syncValue();
	            this.deferFocus();
	        }
	    }else if(Ext.isGecko || Ext.isOpera || Ext.isWebKit){
	        this.win.focus();
	        this.execCmd('InsertHTML', text);
	        this.deferFocus();
	    }
	}
});

Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth: 55,
        url:'save-form.php',
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Send To',
            name: 'to',
            anchor:'100%'  // anchor width by percentage
        },{
            fieldLabel: 'Subject',
            name: 'subject',
            anchor: '100%'  // anchor width by percentage
        }, {
            xtype: 'htmleditor',
            hideLabel: true,
            name: 'msg',
			id: 'myeditor',
            anchor: '100% -53',  // anchor width by percentage and height by raw adjustment
            listeners: {
				afterrender: function(t){
					t.getToolbar().addButton({
						text: 'test',
						handler: function(t){
							Ext.getCmp('myeditor').insertAtCursor('<b>Test</b>');
						}
					});
				}
			}
        }]
    });

    var window = new Ext.Window({
        title: 'Resize Me',
        width: 600,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: form,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

    window.show();
});

[evant]

Fixed in SVN, thanks.