I came across some cross-browser weirdness while trying to integrate the ExtJs HtmlEditor into our project:
If you decrease/increase the font size in Firefox3.6, it wraps the selected text in a ” tag with a size attribute (e.g. ‘visitor’). If you do the same in Chrome6 or Safari4, it wraps it into a ” tag with ‘style=font-size…’ attribute ( e.g. ‘visitor’). Therefore, once you change the font size in Firefox, you won’t be able to modify it in Safari or Chrome and vice versa.
This is done by the browser’s Midas engine (as documented here: http://www.mozilla.org/editor/midas-spec.html). The implementation calls:
document.execCommand('FontSize', false, value); // value is the font size as a numeric value
So, there is not much I can change about it. I was about to write my own implementation of the font size changer, but after I went down the route I recognized that that would be a rather complicated implementation.
Has anyone else encountered that problem? Are there any good solutions for this one?
As long as you will save the source somewhere on a server, i would like to recommend to leave the editor as is.
On the server-side you normally will validate the source, so the validation will be a good time to transform the source to a unique style.