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;
}

2 thoughts on “Changing the RichTextEditor control’s style name in Flex

  1. Thanks for providing somes clear Flex and AS3 code examples.
    Do you know a way to change the color of the edition zone ?

Comments are closed.