Page 1 of 2 12 LastLast
Results 1 to 10 of 16

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

    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
      0  

    Default [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
    8
      0  

    Default

    Thanks for your report.

  3. #3
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      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
    18,584
    Vote Rating
    873
      0  

    Default

    @OP: Is this actually causing an issue, or is this just from looking at the code?
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Ext User netski's Avatar
    Join Date
    Oct 2008
    Posts
    50
    Vote Rating
    0
      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 User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
      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
      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
    8
      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 User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      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
    18,584
    Vote Rating
    873
      0  

    Default

    Fixed in SVN, thanks.
    Evan Trimboli
    Twitter - @evantrimboli

Page 1 of 2 12 LastLast

Posting Permissions

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