PDA

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



NebyGemini
12 Feb 2010, 7:39 AM
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.

VinylFox
12 Feb 2010, 10:44 AM
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.

NebyGemini
12 Feb 2010, 11:55 AM
I use a custom getDocMarkup() so the font & color settings are from a stylesheet.



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 .

VinylFox
12 Feb 2010, 1:55 PM
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.


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.

evant
19 Mar 2010, 10:11 PM
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.