Toggling the control bar in a Flex RichTextEditor control

by Peter deHaan on November 21, 2007

in RichTextEditor

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 comments… read them below or add one }

1 Tony Jacobson March 11, 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

Reply

2 tony grimes May 15, 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.

Reply

3 tony grimes May 16, 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).

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: