Flex Examples

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>