Many of you may experience some of the same things I do when it comes to maintaining a Flex site. I try to create tools that help make my job easier, and at times create twice as much work making the tools. Well, here’s a tool that took 2 lines of mxml and made a big difference in the amount of time it takes me now to update htmlText.

The situation: You’ve got a TextArea component with text that you want bold, italic, underline, different sizes, bulleted, etc. Using htmlText is great for that, but here’s the catch: you can’t shortcut the design of it using Dreamweaver or whatever your favorite wysiwyg html editor is, because they generate HTML 4.0. You may do the guess and check type of editing where you do what you think will look good, then build your project to see if you like it. But if you do a lot of editing, that gets old fast.

Another scenario might be that you pull the text from an XML file to populate some of the TextArea’s htmlText components. It’s the same situation.

The solution: Create a RichTextEditor component (id=”myRTE” for the example), and a TextArea (id=”myTA”). You bind the TextArea’s text to the htmlText of the RichTextEditor. If you want to be able to change the html and see it reflected in the RichTextEditor, bind myRTE’s htmlText to myTA’s text property. Here’s the mxml for the application at the link.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" pageTitle="htmlText Editor">
  <mx:RichTextEditor id="myRTE" width="100%" height="50%" htmlText="{myTextArea.text}" title="Formatted Text"/>
  <mx:Panel title="HTML 1.0" width="100%" height="50%">
    <mx:TextArea id="myTextArea" text="{myRTE.htmlText}" width="100%" height="100%"/>
  </mx:Panel>
</mx:Application>