Automatically getting underlined links in the RichTextEditor
From the livedocs documentation on the RichTextEditor:
To create a link, select a range of text, enter the link target in the text box on the right, and press Enter. You can only specify the URL; the link always opens in a _blank target. Also, creating the link does not change the appearance of the link text; you must separately apply any color and underlining.
I wanted the links to appear underlined in the comment submission form that I created for polyGeek.com – see below. I think it’s poor usability to have a RichTextEditor that makes links but doesn’t underline them. The user is left wondering if the link work or not.
Adding the underline was pretty easy. All it took was a suitable application of Regular Expressions. Take a look at the two RTEs below. The top one is your regular old RTE and the bottom one is customized to display underlined links.
| view source |
If you work with the RichTextEditor you’ll learn real quick that it isn’t like your other Flex Components. At first glance you would think that the following code would give you the HTMLtext in of the RTE:
var html:String = rte.htmlText;
But no. The rte itself doesn’t have a property for htmlText. That’s because the RTE is really a Panel filled with other components, like a TextArea. So if you want the htmlText you would say:
var html:String = rte.textArea.htmlText;
In retrospect this seems pretty obvious. It first confounded me because I set a FocusOut event listener on my RTE but it wouldn’t fire when the TextArea lost focus – which is what I wanted. After a few minutes of poking around I figured it out. Hopefully I’ve just saved you the grief.
To set listeners you should probably listen for the creationComplete event on your RTE. Then you can go and add listeners for which ever parts of the RTE you need to.
Jason Langdon
