Flex Examples
The following example shows how you can set HTML text in a Spark RichText control in Flex 4 by converting the HTML string to a TextFlow object using the static TextConverter.importToFlow() method and setting the textFlow property.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
In build 4.0.0.10936 (checkin notes), the static TextConverter.TEXT_FIELD_HTML_FORMAT property changed to TextConverter.TEXT_FIELD_HTML_FORMAT.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_textFlow_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.TextConverter; ]]> </fx:Script> <fx:Declarations> <fx:String id="htmlTextAsHTML"><![CDATA[<p>The quick brown <b>fox jumps over</b> the lazy dogg.</p>]]></fx:String> </fx:Declarations> <s:RichText id="richTxt" textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}" horizontalCenter="0" verticalCenter="0" /> </s:Application>
View source is enabled in the following example.
Or, you can set the textFlow property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_textFlow_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.TextConverter; ]]> </fx:Script> <fx:Declarations> <fx:String id="htmlTextAsHTML"><![CDATA[<p>The quick brown <b>fox jumps over</b> the lazy dogg.</p>]]></fx:String> </fx:Declarations> <s:RichText id="richTxt" horizontalCenter="0" verticalCenter="0" initialize="richTxt.textFlow = TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT);"/> </s:Application>
For more examples of setting text in the Spark RichText control, see “Setting text in a Spark RichText control in Flex 4″.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hey Peter. I’ve notcied that <a> links don’t work in the RichText component like they do in TextArea when you use a TextFlow object. Is this a bug? Tastes funny to me.
@lee probert,
It is actually not a bug, just somewhat unexpected. See http://bugs.adobe.com/jira/browse/SDK-22109
The RichText control is non-interactive (non-selectable or non-editable). The workaround is to use a non-selectable and non-editable RichEditableText control instead (
<s:RichEditableText selectable="false" editable="false">).Peter
way late to the game but then maxDisplayedLines won’t work : )
DAMN YOU ‘A’ TAG!!!
I was trying to do this in ActionScript. Kept getting errors. Finally discovered that I had to take the TextConverter code out of the quotes & curly {} braces.
This entry saved me two hours of work… thanks ;)
Thanks for this, Peter, though I’ve also found that is much simpler.
But I’m stumped. Apparently H1 tags are no longer supported? Is there a list of HTML tags that ARE supported? And is there some dev blog that explains the decision to exclude semantic markup from the Flex Roadmap? Are we off creating new, conflicting standards again? That’s SO 2005.
Hmmm, my previous code was stripped from my comment. Here is is again without the angle brackets:
s:TextArea textFlow=”{TextFlowUtil.importFromString(helpText)}”
Is there any way to set styles to the html-formatted-text elements ??
Hi,
This has been very helpful for me indeed… But I still face a problem:-
I want to apply the effects of the following HTML tags/ attributes, in my HTML text rendered in Flex Spark Richtext Component.
Superscript –
Subscript –
Blockquotes –
Ordered Lists –
Unordered List –
Horizontal Rule –
Direction Attribute for – Hello
Background Color for
But unfortunately the above controls doesn’t seem to work :(
Any solutions, tweaks and tricks will be appreciated…
Thanks,
Mangirish
Sorry, my HTML tags got stripped off
Here it is again:-
I want to apply the effects of the following HTML tags/ attributes, in my HTML text rendered in Flex Spark Richtext Component.
Superscript – <sup>
Subscript – <sub>
Blockquotes – <blockquotes>
Ordered Lists – <ol><li>
Unordered List – <ul><li>
Horizontal Rule – <hr>
Direction Attribute for <p> – <p dir=”rtl”>Hello</p>
Background Color for <font>
Any solutions, tweaks and tricks will be appreciated…
Thanks,
Mangirish
Your posts save me so much time and teach me so many little tricks that always solve my problems. Good work!