Toggling the control bar in a Flex RichTextEditor control at Flex Examples

Nov

Toggling the control bar in a Flex RichTextEditor control

By peterd

Categories: RichTextEditor Tags: RichTextEditor, showControlBar.

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

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/21/toggling-the-control-bar-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

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

</mx:Application>

View source is enabled in the following example.

3 Responses to “Toggling the control bar in a Flex RichTextEditor control”

Feed for this Entry View blog reactions

1 Tony Jacobson Mar 11th, 2008 at 5:01 pm

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 tony grimes May 15th, 2008 at 4:55 am

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 tony grimes May 16th, 2008 at 2:54 am
this will put the toolbar above the textArea
```
var displayObj:DisplayObject = mainrteText.toolbar;
rte.toolbar.parent.removeChild(displayObj);
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).