Rich Text Editor with Disclosable Controls in Flex 2

I recently worked on a project that called for the use of the Rich Text Editor control. In our case it was determined that some users would never had the need to format their text. In fact, I’d venture to say in most cases were a Rich Text Editor is called for in an RIA, there are a subset of users or use-cases where those controls are not required.

For that reason, there’s a property called “showControlBar” which allows you to show or hide the control. However, there’s no out-of-the-box affordance for setting this property at runtime. What follows is a simple example that adds a child to the Rich Text Editor that shows and hides the control bar.

It should be said, as always, the following example was created by myself, and I am a User Experience Consultant, not a developer. So, this should be seen as an example of good User-Experience pattern, but should not be seen as a best-practive recommendation for development. For starters, it would have probably been good to componentize it. But, is a simple example with just a few lines of code anway.

To download the source, click here.

_uacct = “UA-1465179-1”;
urchinTracker();

10 Responses to Rich Text Editor with Disclosable Controls in Flex 2

  1. Gloria says:

    Do you think there is a solution to the sluggish behavior when I paste many lines of text in this app?

  2. haan says:

    I like it

  3. Hoobamac says:

    This is cool – are looking at enhancing this with links and images etc – this seems to be the only wysywyg editor fir flex around!

  4. Homer J says:

    If you need more here is a really cool editor – but it’s not free: http://www.flashloaded.com/flashcomponents/flashtexteditor/

  5. montana says:

    it’s a shame this doesn’t produce clean xhtml, it would be really useful with some customization.

  6. Bill says:

    Very nicely done. I like the clean look!

  7. tushar says:

    Adobe recently acquired Buzzword, the only real WYSIWYG rich text editor.

    They are however, not releasing for developers to use in their own application.

    How easy or difficult would it be to convert the above RT Editor into a simi-WYSIWYG editor/viewer?

    Features would include
    – Page-End indicator (required)
    – Basic Spellcheck (optional)
    – Basic Formatting (optional)
    – Basic Autocomplete (optional)

    Any comments?

  8. Peter Baird says:

    So, I should make clear if isn’t already. This example is not in any way a custom component, but rather an example of how to make the out-of-the-box Flex RTE disclosable, using the component’s out-of-the-box actions. I have no particular insight into the Rich Text Editor code-base or what’s possible. I’d recommend you ask around on a Flex forum such as flexcoders. Sorry I can’t be of more help.

  9. Sateesh says:

    Is there a way to make this Text editor as a template with Header, Body and Footer where user can type only in these predefined area…

  10. fox says:

    Please add leading to the editor than It would be complete !