Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User netski's Avatar
    Join Date
    Oct 2008
    Posts
    50
    Vote Rating
    0
    netski is on a distinguished road

      0  

    Default [TENT][3.0.0] Ext.HtmlEditor.insertAtCursor and Chrome

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


    Hello,

    No implementation in the function for Chrome:

    Code:
        /**
         * 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

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Thanks for your report.

  3. #3
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    the OP is incorrect. Chrome is WebKit.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,169
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    @OP: Is this actually causing an issue, or is this just from looking at the code?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User netski's Avatar
    Join Date
    Oct 2008
    Posts
    50
    Vote Rating
    0
    netski is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    @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

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by netski View Post
    IS actually causing an issue my example corrected it
    that doesn't make sense. Chrome uses the WebKit engine, which supports
    Code:
    someIframe.document.execCmd('InsertText', text);
    what's the exact error message you're seeing in the Chrome js console?

  7. #7
    Ext User netski's Avatar
    Join Date
    Oct 2008
    Posts
    50
    Vote Rating
    0
    netski is on a distinguished road

      0  

    Default


    Quote Originally Posted by mystix View Post
    that doesn't make sense. Chrome uses the WebKit engine, which supports
    Code:
    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

  8. #8
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    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

  9. #9
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    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:
    Code:
    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.

    Code:
    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();
    });

  10. #10
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,169
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Fixed in SVN, thanks.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!