« Enable Smoothing on Images for scaling in Flex 2 | Main | Designing More Usable Applications with Flex UI Capabilities »

September 12, 2006

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.


Posted by Peter Baird at September 12, 2006 10:17 AM

Comments

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

Posted by: Gloria at September 19, 2006 7:58 PM

I like it

Posted by: haan at October 17, 2006 5:48 AM

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

Posted by: Hoobamac at January 5, 2007 1:49 PM

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

Posted by: Homer J at April 1, 2007 11:04 PM

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

Posted by: montana at September 19, 2007 11:56 AM

Very nicely done. I like the clean look!

Posted by: Bill at May 12, 2008 12:10 PM

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?

Posted by: tushar at August 30, 2008 1:42 PM

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.

Posted by: Peter Baird at September 2, 2008 7:57 AM

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...

Posted by: Sateesh at January 8, 2009 8:48 AM

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

Posted by: fox at January 25, 2009 2:01 AM

Post a comment




Remember Me?

(you may use HTML tags for style)

Powered by Movable Type