Results 1 to 5 of 5

Thread: [CLOSED-562] Ext.form.HtmlEditor text-color doesn't work in firefox (3.6)

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User NebyGemini's Avatar
    Join Date
    Jan 2010
    Location
    Netherlands
    Posts
    3
    Vote Rating
    0
      0  

    Default [CLOSED-562] Ext.form.HtmlEditor text-color doesn't work in firefox (3.6)

    Both the text-color and the background/hilight color buttons won't work in firefox.

    The problem lies in the this.execCmd('forecolor') and this.execCmd('hilitecolor') parameter. firefox now wants the color formatted like "#aabbcc" instead of "aabbcc".
    Just like WebKit and IE.

  2. #2
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      0  

    Default

    Are you using FF version 3.6 exactly? and what's the OS?

    Im using FF 3.6 in Vista and can't reproduce this problem with the latest build on 3.2.x branch.

  3. #3
    Ext User NebyGemini's Avatar
    Join Date
    Jan 2010
    Location
    Netherlands
    Posts
    3
    Vote Rating
    0
      0  

    Default Steps to reproduce

    I use a custom getDocMarkup() so the font & color settings are from a stylesheet.

    Code:
    Ext.ux.WysiwygEditor = Ext.extend(Ext.form.HtmlEditor, {
    
    	getDocMarkup: function () {
    		var html = '<?xml version="1.0" encoding="UTF-8"?>';
    		html += '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">';
    		html += '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">';
    		html += '<head>';
    		html += '	<title>Editor</title>';
    		html += '</head>';
    		html += '<body class="MyContentsClass">';
    		html += '</body>';
    		html += '</html>';
    		return html;
    		
    	}
    });
    Ext.reg('wysiwyg', Ext.ux.WysiwygEditor);
    This also causes the browsers Strict mode instead of Quicks mode.
    Tthis probably has something to do with it .
    Last edited by mystix; 13 Feb 2010 at 1:14 AM. Reason: POST CODE IN [code][/code] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  4. #4
    Sencha User VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
      0  

    Default

    Yes, that is a very important part of the equation.

    Can you give this override a try. It implements your suggestion of always passing hex colors with a pound sign. Ive tested it with FF3.6, IE8, Chrome 5 & Safari 4, which all work fine. I would imagine that it was coded the other way on purpose, so it would be nice to find out if its still needed.

    Code:
    Ext.override(Ext.form.HtmlEditor, {
        createToolbar : function(editor){
    	    var items = [];
    	    var tipsEnabled = Ext.QuickTips && Ext.QuickTips.isEnabled();
    	
    	
    	    function btn(id, toggle, handler){
    	        return {
    	            itemId : id,
    	            cls : 'x-btn-icon',
    	            iconCls: 'x-edit-'+id,
    	            enableToggle:toggle !== false,
    	            scope: editor,
    	            handler:handler||editor.relayBtnCmd,
    	            clickEvent:'mousedown',
    	            tooltip: tipsEnabled ? editor.buttonTips[id] || undefined : undefined,
    	            overflowText: editor.buttonTips[id].title || undefined,
    	            tabIndex:-1
    	        };
    	    }
    	
    	
    	    if(this.enableFont && !Ext.isSafari2){
    	        var fontSelectItem = new Ext.Toolbar.Item({
    	           autoEl: {
    	                tag:'select',
    	                cls:'x-font-select',
    	                html: this.createFontOptions()
    	           }
    	        });
    	
    	        items.push(
    	            fontSelectItem,
    	            '-'
    	        );
    	    }
    	
    	    if(this.enableFormat){
    	        items.push(
    	            btn('bold'),
    	            btn('italic'),
    	            btn('underline')
    	        );
    	    }
    	
    	    if(this.enableFontSize){
    	        items.push(
    	            '-',
    	            btn('increasefontsize', false, this.adjustFont),
    	            btn('decreasefontsize', false, this.adjustFont)
    	        );
    	    }
    	
    	    if(this.enableColors){
    	        items.push(
    	            '-', {
    	                itemId:'forecolor',
    	                cls:'x-btn-icon',
    	                iconCls: 'x-edit-forecolor',
    	                clickEvent:'mousedown',
    	                tooltip: tipsEnabled ? editor.buttonTips.forecolor || undefined : undefined,
    	                tabIndex:-1,
    	                menu : new Ext.menu.ColorMenu({
    	                    allowReselect: true,
    	                    focus: Ext.emptyFn,
    	                    value:'000000',
    	                    plain:true,
    	                    listeners: {
    	                        scope: this,
    	                        select: function(cp, color){
    	                            this.execCmd('forecolor', '#'+color);
    	                            this.deferFocus();
    	                        }
    	                    },
    	                    clickEvent:'mousedown'
    	                })
    	            }, {
    	                itemId:'backcolor',
    	                cls:'x-btn-icon',
    	                iconCls: 'x-edit-backcolor',
    	                clickEvent:'mousedown',
    	                tooltip: tipsEnabled ? editor.buttonTips.backcolor || undefined : undefined,
    	                tabIndex:-1,
    	                menu : new Ext.menu.ColorMenu({
    	                    focus: Ext.emptyFn,
    	                    value:'FFFFFF',
    	                    plain:true,
    	                    allowReselect: true,
    	                    listeners: {
    	                        scope: this,
    	                        select: function(cp, color){
    	                            if(Ext.isGecko){
    	                                this.execCmd('useCSS', false);
    	                                this.execCmd('hilitecolor', color);
    	                                this.execCmd('useCSS', true);
    	                                this.deferFocus();
    	                            }else{
    	                                this.execCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', '#'+color);
    	                                this.deferFocus();
    	                            }
    	                        }
    	                    },
    	                    clickEvent:'mousedown'
    	                })
    	            }
    	        );
    	    }
    	
    	    if(this.enableAlignments){
    	        items.push(
    	            '-',
    	            btn('justifyleft'),
    	            btn('justifycenter'),
    	            btn('justifyright')
    	        );
    	    }
    	
    	    if(!Ext.isSafari2){
    	        if(this.enableLinks){
    	            items.push(
    	                '-',
    	                btn('createlink', false, this.createLink)
    	            );
    	        }
    	
    	        if(this.enableLists){
    	            items.push(
    	                '-',
    	                btn('insertorderedlist'),
    	                btn('insertunorderedlist')
    	            );
    	        }
    	        if(this.enableSourceEdit){
    	            items.push(
    	                '-',
    	                btn('sourceedit', true, function(btn){
    	                    this.toggleSourceEdit(!this.sourceEditMode);
    	                })
    	            );
    	        }
    	    }
    	
    	    // build the toolbar
    	    var tb = new Ext.Toolbar({
    	        renderTo: this.wrap.dom.firstChild,
    	        items: items
    	    });
    	
    	    if (fontSelectItem) {
    	        this.fontSelect = fontSelectItem.el;
    	
    	        this.mon(this.fontSelect, 'change', function(){
    	            var font = this.fontSelect.dom.value;
    	            this.relayCmd('fontname', font);
    	            this.deferFocus();
    	        }, this);
    	    }
    	
    	    // stop form submits
    	    this.mon(tb.el, 'click', function(e){
    	        e.preventDefault();
    	    });
    	
    	    this.tb = tb;
    	    this.tb.doLayout();
    	}
    });
    The two lines changed are marked in green.

    Of course the other option would be to drop the doctype.

  5. #5
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,020
    Vote Rating
    950
      0  

    Default

    The bug occurs because of the custom override you're using to force the editor into strict mode.

    As such, I wouldn't classify it as a bug, since you're changing the default behaviour.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Tags for this Thread

Posting Permissions

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