Setting the background color of the RichTextEditor text area in Flex

RichTextEditor, TextArea,

The following example shows how you can set the background color of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_backgroundColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                richTextEditor.textArea.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="0xFFFFFF"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

You can also set the nested TextArea control’s background color in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_backgroundColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RichTextEditor {
            textAreaStyleName: rteTextAreaStyles;
        }

        .rteTextAreaStyles {
            backgroundColor: haloSilver;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

6 thoughts on “Setting the background color of the RichTextEditor text area in Flex”

  1. I found that it works incorrect. Try to set some text style like color, size etc and change background color. It jumps to default values.

  2. Alexander,

    Good catch! I filed this in the Flex bug base as https://bugs.adobe.com/jira/browse/SDK-19453 and attached a workaround.
    Basically, you’ll need to re-set the htmlText property after calling the setStyle() method:

    private function btn_click(evt:ColorPickerEvent):void {
    var formattedText:String = richTextEditor.htmlText;
    richTextEditor.textArea.setStyle("backgroundColor", evt.color);
    // Workaround...
    richTextEditor.htmlText = formattedText;
}

    Peter

  3. How to set background color for some selected lines on a Rich Text Area. Say if you have 10 lines of text, you want to highlight only 3 lines (line 2,3,4) only, how do you do that? Please note that I would like to high light the whole back ground for entire line (not just text alone).

    1. Hi Gan, I have the same problem. I want to render say 4 lines of which say:
      Line 1 should be red font with green background color.
      Line 2 is default black font
      Line 3 is blue font with green background color.
      Line 4 is default black font
      I’ve banged my head around. Looked for solution almost everywhere to no avail.
      Did you find any solution?
      Regards,
      Rahul

  4. I ‘m working on a website which used the RechTextEditor, can you tell me how i can make the default text color #cccccc but don’t change the title color.Thank you very much.

  5. i want create a table on rich text editor using flex where i can get the source code for that

Comments are closed.