It isn’t immediately obvious how to display HTML text in a Spark TextArea. Back in the MX days we had textArea.htmlText which is pretty easy to use. But no such beast on the Spark version.
With a Spark text component you have to run your HTML text through a multi-dimensional phase-inducer which is handily provided through spark.utils.TextFlowUtil.importFromString( myHTMLtext );
But you don’t send the output of the importFromString method to the textArea.text. No, no, no. That would be toooo easy. With Spark there’s a new thingy called textFlow. That’s what gets the output of the importFromString() method.
Here’s a very simple example
myTextArea.textFlow = spark.utils.TextFlowUtil.importFromString(
'some <span fontWeight="bold">bold</span> text.' );
You can use the app below if you want to play around with this and see what’s possible.
| view source |
There are a few issues that I’ve found with the new Spark Text components. First, I cannot get embeded <span> tags to render. For instance I can’t change the fontWeight to bold and also change the fontSize to, say, 16 on the same text. I’m not sure what’s up with that.
Also, I cannot get unordered-lists to display at all. Perhaps these are just issues that will be resolved when Flex4 is ready for primetime. If you know anything about this I’d love to read about it in the comments.
One interesting bonus I found is that creating a link automatically turns the text blue and underlines it. I’m not sure how you would override that but it’s nice that it doesn’t show up as just regular un-formatted text.
What’s funny is that starting out this was just going to be a simple example with two text fields where you could type in your HTML and then see it rendered below. Then I thought I’d add a button to make the selected text bold. And then italic. And on and on. Sometimes I just don’t know when to quit.
More examples at Setting text in a Spark RichText control in Flex 4 at blog.FlexExamples.com.
You asked about creating an "unordered list" in the Flex 4 TextArea. I assume you mean you want a bullet list? If so, the answer is "you can't" (TM)
All the Flex 4 text components are based on TLF, and TLF doesn't (yet) support bullet lists.
@Paul, Thanks man. Now I can stop banging my head trying to do it. I was guessing that it was something that just wasn’t yet implemented. And yes, I was talking about bulleted lists.
The final version of Flex 4 is out and still no way to display <ul><li>…</li></ul>
WTF ?
It was so easy to display in Flex 3, it looks like unfinished job :(
Did you find a way to do this ?
Thaks
I haven't found a way to do this. Have you tried using the character codes for bullets and such? That might work. Flex 4 definitely makes a lot of changes to how HTML text is rendered. You could always just use the Flex 3 TextArea to display HTML text in your Flex 4 projects.
Thanks very much for this. I've been struggling with the loss of HTMLtext for a while.
Have you noticed that your sample will crash debug Flash on Chrome if you try to manually type in a tag? I mean, if you type a "<" in the HTMLInput TextArea, Flash will lock up completely. It's part of the try/catch section for invalid text. No real big deal, I just thought it was interesting.
My real question is about links. In your code, you have no special event listeners or anything to respond to links being clicked, and yet the links are handled correctly. However, when I try to put the same formatted text into a importFromString call, I get text that is blue, underlined, and looks like a link, but won't respond to a click. I can't see any special code that you have to enable links, so do you know of anything I could be doing to make a link non-clickable?
Sorry to bother you, I figured it out on my own. The problem was that I had one TextArea that I was using to edit, and then when focus was lost, it parsed the text and turned link references into real links. The problem with that was, editable TextAreas don't respond to the click event by opening links. The only way a link can be opened is for the TextArea to be un-editable.
Anyway, sorry to bother you with the question. And thanks again for this post.
@Brand Glad you figured it out. There are a lot of nuances to the TextArea that aren’t very obvious.
Its not too big of a deal to just paste in from Character Pallette.
You could do the following:
<fx:String id="what">
<![CDATA[<b>•Custom Flex and ColdFusion Web Application Development</b><br/><b>• Custom AIR Desktop Application Development</b><br/><b>•Business Systems Analysis and Implementation</b>]]>
</fx:String>
<s:Label text="Douglas Reynolds Consulting:"/>
<s:RichText id="whatTxt"
textFlow="{TextConverter.importToFlow(what, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
horizontalCenter="0" verticalCenter="0" />
I am getting a unexpectedXMLElementInSpan error all the time, I try to parse the following string: "<span>Toto < a>my link</a> fkfk</span>
Whats wrong ?
@eBuildy, that is interesting. I just looked at it in my html/textArea using textFlow layout control for rendering and your example wouldn't render. It didn't throw an error though.
If I did: <span>Toto</span><a>my link</a><span>fkfk</span> and that worked without a problem.
Finally! I can pull my HTML data from the mySQL DB and render it in a TextArea tag. THANK YOU! Funny thing is, I still need to Base64 encode and decode it when I pass the data back and forth from PHP to Flex. Easy to do, but it is funny (I think).
Hi Dan,
Great post!
I was just wondering if this will support swfs in the img tag?
@Brandon Ahhh, no. Only the / tags support SWFs.
What if content is parsed from an rss feed that contains simple html elements, like <b>, <em> and <i> tags? Is there any easy way to render it as HTML using a Spark Text component?
@worked You’ll have to use Regular Expressions to fix up the HTML tags. I don’t think the Spark Text components can handle things like the <i> tag. You’d need to change it to <em>. Once you got that going you should be in good shape to use the example I showed here in this post.
How i Can fill one RichText from one Resulevent from one httpservice than return one node in xml wich contain the Html Text
@Gian Sorry, It doesn’t sound like your issue is RichText oriented. It sounds like you’re trying trying to parse data.
Don’t know whether this is to do with the new 10.2 and some sort of incompatibility with the code used, but attempting to edit the text in the top box is causing Flash to freeze in Chrome, Firefox & IE.
Anyone else getting this??
@Tim John: I just tested on FF4 / FP10.2 and it worked fine.
It’s working for me now. Strange. Sorry bout that.
Hello,
I’ve just started working with TLF. I am trying to make a TextArea or RichText that autosizes to the content I put in using textFlow = TextConverter.importToFlow (S, TextConverter .TEXT_FIELD_HTML_FORMAT);
This works fine. The only problem is I can’t figure out how to determine the size of the textArea after adding the text. Any ideas?
lee
@Kleelof That is a good question. Just thinking off the top of my head – because I haven’t messed with this in ages – you might try *actualWidth*. That might work. It could also be that you need to wait for the properties to all be set if the text changes.
Hello,
Yes, that turned out to be the solution, although not much of one.
You have to put an ‘added’ event listener on it. And at the handler check the width and height. The only problem is you have to check that the height and width are both non-0, then trigger an event for the container holding it.
Very messy.
I originally needed to know this info so I could align the text with other stage items. In the end, I figured out that putting the text container inside of a Group, VGroup or HGroup would net the results I needed.
take care,
lee
Great article, Was very useful.
I’m wondering if anybody has got to the bottom of getting and to work.
I’d really like to be able to pull in my content as raw text and parse it rather than have to type out the MXML…
I’ve been having a look at the SDK and noticed a few places that would be suspect for extension but they are locked in static helper methods. If only we could access the ImportExportConfiguration we would be able to manually support and elements..
Here’s one solution for the unordered lists problem.
It’s messy, though. I don’t particularly like it.
1. Your item
2. Your item
3. Your item
4. Your item
5. Your item
6. Your item
It’s not perfect, either – but hey.
Sorry about all the repetitive comments – I can’t seem to get the site to stop rendering the solution. Here’s where I found it though:
http://forums.adobe.com/thread/799979?decorator=print&displayFullThread=true
@Jonathan Thanks for the suggestion/link. I believe I’ve read about people writing their own parsers/renderers for displaying HTML in TextFields. I just can’t remember where.
Hello
I am trying to add following code
“row 1, cell 1row 2, cell 1″
it is giving me error.
Could you please help
probably the above comment got modified.
I just wanted to know if I can add table tag in the text area
No, not by a long shot. The HTML that the TextArea can handle is very limited. But take a look at TinyTLF. I think that might render a table. I know I’ve seen people do that before in Flash. Just can’t remember exactly where.
Thanks for the reply.
I am afraid I cann’t find any link for the TinyTLF example and source code.
Thanks alot. It helped me.
Is there any way to see if text is well formed HTML (per importFromString) before you try to import it? It throws a code stopping RTE so the only way to deal with it is try/catch.
Yeah, I think try/catch is your only option.