Toggling the control bar in a Flex RichTextEditor control

The following example shows how you can toggle the RichTextEditor component’s control bar using the showControlBar property.

Full code after the jump.


<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showControlBar:">
                <mx:CheckBox id="checkBox" selected="true" />

    <mx:RichTextEditor id="richTextEditor"
            title="Rich Text Editor"
            showControlBar="{checkBox.selected}" />


View source is enabled in the following example.

3 thoughts on “Toggling the control bar in a Flex RichTextEditor control

  1. This is cool. I’m deadly curious to find out if it’s possible to do two other things with the Rich Text Editor component:

    1) Can the control bar buttons etc be skinned and/or customized?

    2) Can the control bar positioned anywhere in the RTE design area? Eg., be positioned above the text area sitting right on the top edge with zero-clearence.

    tonejac deluxe

  2. you can style the control bar with setStyle(prop:String, value) – where prop is one of numerous styles in the componenet’s API.

    However, i have teh same question regarding positioning of the control bar. Cant work out how to place it above the text Area.

  3. this will put the toolbar above the textArea

    var displayObj:DisplayObject = mainrteText.toolbar;
    rte.addChildAt(displayObj, 0);

    its a weird roundabout way of doing it but was the only way i could work out how to target the ControlBar (it has no id and doesnt seem to be targettable directly through the DisplayList. Weird).

Comments are closed.