Why combining RichTextEditor and StyleSheets is a pain

A while ago Maikel pointed out to me that styling the htmlText in a RichTextEditor is a real pain.
This is mainly because the RTE component uses TextFormat to style its textual content, and Flex does not like the thought of the TextFormat and StyleSheet classes combined applied on textfields (it throws a runtime error).

Note that this post is partially for personal reference and although it might prove to be useful to some, it does not provide any ready-to-use solutions..

Anyway, I had a quick glance at the source code for the RTE class to see whether or not creating a subclass would be an option. I found out that TextFormats are applied from within three methods, being getTextStyles() setTextStyles() and commitProperties(), of which the latter is a overridden protected method from the UIComponent class.
Unfortunately, the first two are private methods, which means that only the containing class can access them, and no subclass would be able to either access or override them.

After some searching I also found out that setTextStyles() is used only by the GUI buttons. And seeing that all of those have their id properties set, we can easily create a replacement function in a subclass and point the GUI buttons to our new function.
getTextStyles() is called mainly when textual contents change (as a listener for TextArea’s key-up and release-outside events), and also for the font-family ComboBox its creation-complete event..

So creating a RTE subclass to get StyleSheets working with it, would mean completely rewriting the get-/setTextStyles() methods only to get the TextFormat out of there, and when that’s done the StyleSheet part still has yet to be implemented..
All this does not seem all too appealing to me, and I think that perhaps writing a new RTE class would be much more convenient, and less of a hassle.

I’d be pleased with any insight given regarding this subject, so please leave a comment if you think you have any helpful thoughts..

9 thoughts on “Why combining RichTextEditor and StyleSheets is a pain

  1. Yep… I ended up here for the same reason! I want to add paragraph styles and change the colour of the URL.

    I guess the reason TextFormat is used is because you can easily define a start/end index where formatting can be applied. I *think* the content of htmlText is worked out (somewhere!?) after you request it.

    This means you cannot provide a WYSIWYG editor that matches and shares the same CSS styles between back-end administration and user-facing front end. Which basically renders this component useless for my purposes.

  2. More pain!

    Found this note in the support, stylesheets and editable text components don’t go together:

    Note: A text field with a style sheet is not editable. In other words, a text field with the type property set to TextFieldType.INPUT applies the StyleSheet to the default text for the text field, but the content will no longer be editable by the user. Consider using the TextFormat class to assign styles to input text fields.

    After some projects i’ve worked on, I must say flex/flash lack of HTML support is so poor, it leaves flex almost unusable for most of our projects.


Comments are closed.