HtmlEditor and increase/decrease font size with Midas commands

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?

Thanks in advance

I would rather not do it on the backend. To me, this is a frontend functionality. Also, in the frontend we use the same RichTextEditor component for all clob fields. I only need to fix one component. Whereas in the backend, we have different business logic around these fields with different validators, which all would need to be changed and there are more potential points of failure. The change on the backend would be equally as complicated as coming up with my own frontend solution.

Johannes 2010-10-04 22:05:34

If I had to to this on client-side, I would take the node(documentElement if you use an iframe or the editor-element if you use an contenteditable-element ) and fetch all font-elements with getElementsByTagName(). I would replace them with a span/div, and set the style of the span/div according to e.g. the size-attribute of the font-element(note that font's size-attribute does'nt use pixels). There is also a command "styleWithCss", but I guess this is not accepted in IE.

Dr.Molle 2010-10-04 23:01:15

I just tried the styleWithCss. That didn't change Firefox's behaviour. I will go ahead and try your other suggestion.

Johannes 2010-10-05 16:25:40

Well, there is one issue with that solution. If I transform the font tag to a span tag, Firefox is not able anymore to recognize the current font size. E.g. I have a span with font-size x-large. Increasing the size should set it to xx-large, but Firefox doesn't recognize that the size has already been increased since it is looking for a font tag. So, therefore it sets the size to 5 (which equals 'large'). So, that doesn't work.

Johannes 2010-10-05 17:08:42

After waiting a week, your answer was the best. Thanks for the input.

Johannes 2010-10-11 21:21:18

ansaurus

tags:

views:

answers:

HtmlEditor and increase/decrease font size with Midas commands

related questions