Displaying HTML formatted text in a Spark RichText control in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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>

[GoogleAdsWide]

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

12 thoughts on “Displaying HTML formatted text in a Spark RichText control in Flex 4

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

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

    var tmpString:String = "&lt;![CDATA[<b>" + variableBold + "<i>italic text</i></b>";
    mytextFlow = TextConverter.importToFlow(tmpString,TextConverter.HTML_FORMAT);
     
     
    var%20tmpString%3AString%20%3D%20%22%3C%21%5BCDATA%5B%3Cp%3E%3Cb%3E%22%20%2B%20variableBold%20%2B%20%22%3Cbr%3E%3Ci%3Eitalic%20text%3C%2Fi%3E%3C%2Fb%3E%22%3B%0D%0AmytextFlow%20%3D%20TextConverter%2EimportToFlow%28tmpString%2CTextConverter%2EHTML%5FFORMAT%29%3B%0D%0A%09%09%09%09
  3. 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.

  4. Hmmm, my previous code was stripped from my comment. Here is is again without the angle brackets:
    s:TextArea textFlow=”{TextFlowUtil.importFromString(helpText)}”

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

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

  7. Your posts save me so much time and teach me so many little tricks that always solve my problems. Good work!

Comments are closed.