Changing the RichTextEditor control’s style name in Flex

The following example shows how you can change the style name for the Flex RichTextEditor control to the predefined “.opaquePanel” style, by setting the styleName property on the RichTextEditor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar selectedIndex="1"
                itemClick="richTextEditor.styleName = event.item.data;">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="default" data="" />
                    <mx:Object label="opaquePanel" data="opaquePanel" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ToggleButtonBar>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            title="RichTextEditor"
            status="version {richTextEditor.getStyle('version')}"
            styleName="opaquePanel"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

As of the December 4, 2007 build, the defaults.css file (in the installed SDK folder’s \frameworks\projects\framework\ folder) lists the “.opaquePanel” style as:

.opaquePanel
{
	backgroundColor: #FFFFFF;
	borderAlpha: 1;
	borderColor: #FFFFFF;
	footerColors: #E7E7E7, #C7C7C7;
	headerColors: #E7E7E7, #D9D9D9;
}