Hiding nested controls in a Flex RichTextEditor control (remix)

In a previous example, Hiding nested controls in a Flex RichTextEditor control, we looked at how you could hide and remove the nested link text input control within a RichTextEditor control in Flex. The following example extends the example somewhat by allowing you to remove any of the nested controls (including the VRule controls) in in the tool bar by setting the nested control’s visible property to false, as seen in the following snippet:

richTextEditor.colorPicker.visible = false;

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.CheckBox;
 
            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                richTextEditor[ch.data].visible = ch.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true" verticalAlign="top">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamilyCombo.visible:">
                <mx:CheckBox selected="true"
                        data="fontFamilyCombo"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="fontSizeCombo.visible:">
                <mx:CheckBox selected="true"
                        data="fontSizeCombo"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="toolBar2.visible:">
                <mx:CheckBox selected="true"
                        data="toolBar2"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="colorPicker.visible:">
                <mx:CheckBox selected="true"
                        data="colorPicker"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="alignButtons.visible:">
                <mx:CheckBox selected="true"
                        data="alignButtons"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bulletButton.visible:">
                <mx:CheckBox selected="true"
                        data="bulletButton"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="linkTextInput.visible:">
                <mx:CheckBox selected="true"
                        data="linkTextInput"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
 
        <mx:Spacer width="100%" />
 
        <mx:Form styleName="plain">
            <mx:FormItem label="_RichTextEditor_VRule1.visible:">
                <mx:CheckBox selected="true"
                        data="_RichTextEditor_VRule1"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="_RichTextEditor_VRule2.visible:">
                <mx:CheckBox selected="true"
                        data="_RichTextEditor_VRule2"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:RichTextEditor id="richTextEditor"
            width="100%"
            height="100%" />
 
</mx:Application>

View source is enabled in the following example.

9 thoughts on “Hiding nested controls in a Flex RichTextEditor control (remix)

  1. Thanks for this post, it’s quite topical and removing the VRules was something I was struggling with.

    Another aspect of the RichTextEditor I’m having difficulty editing is the ControlBar that the toolbar and controls are contained within. I can’t find a good way to target it and I want to remove the background from this component. Any thoughts on how I could tackle that?

  2. What I wanted to accomplish is to make the background invisible either make it transparent or changing its color to match the background (white). I did the following:

    rich.setStyle("borderThickness", 1);
    rich.setStyle("borderAlpha", 1);
    rich.setStyle("borderColor", 0xFFFFFF);
    rich.setStyle("dropShadowEnabled", false);
    rich.setStyle("headerHeight", 0);
    rich.setStyle("backgroundColor", 0xFFFFFF);

    I noticed that RTE needs to have the border defined to be able to modify the default background. So after setting the border you may be able to set the alpha to transparent.

  3. while not quite what i was looking for this was lots of help in adding a button to the toolbar

    var but:Button = new Button();
    but.label = "Post News";
    but.addEventListener("click",action_post_news);
    rte.toolbar.addChild(but);

    .. and after a bit of experimenting (still learning flex and as3) i found i could add before the TextArea with…

    news_title = new TextInput(); // doesnt start with Var as its globally defined so i can access its text
    news_title.percentWidth = 100;
    var lab1:Label = new Label();
    lab1.text = "Title";
    var hb:HBox = new HBox();
    hb.percentWidth = 100;
    hb.addChild(lab1);
    hb.addChild(news_title);
    rte.addChildAt(hb, 0);
  4. Hi !

    Any idea on how to remove the title bar from a richTextEditor ?
    I know there are titleBar and titleTextField properties on richTextEditor but they are protected properties …

    Thanx.

  5. Hi,

    I know the post its quite old but I would like to ask if it is possible to remove the textarea from the rte and add it into a different place [into a canvas, for example]?

    Another question: It is possible to create a new textarea and make it editable using the same rte over and over?

    Thanks :)

    Your blog RuLeZ!

  6. Taniguchi Toshio, J.,

    I’ve never tried fully customizing the RichTextEditor control, but you can find the MXML source code in your Flex SDK folder at <Flex SDK>\frameworks\projects\framework\src\mx\controls\RichTextEditor.mxml

    It may be possible to copy/paste that file and reorder the MXML components at the bottom of the code (or remove the TextArea altogether and pass a reference to an existing TextArea control to your custom RichTextEditor component).

    Hope that helps,
    Peter

  7. Somebody asked how you could create a RichTextEditor with only the linkTextInput, and I came up with this. I’ll try and port this to a full example later if I get some time:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:RichTextEditor name="LinkOnlyRichTextEditor"
            xmlns:mx="http://www.adobe.com/2006/mxml"
            creationComplete="init();">
     
        <mx:Script>
            <![CDATA[
                private function init():void {
                    // remove unwanted controls...
                    fontFamilyCombo.parent.removeChild(fontFamilyCombo);
                    fontSizeCombo.parent.removeChild(fontSizeCombo);
                    toolBar2.parent.removeChild(toolBar2);
                    colorPicker.parent.removeChild(colorPicker);
                    alignButtons.parent.removeChild(alignButtons);
                    bulletButton.parent.removeChild(bulletButton);
     
                    // remove vertical separators...
                    _RichTextEditor_VRule1.parent.removeChild(_RichTextEditor_VRule1);
                    _RichTextEditor_VRule2.parent.removeChild(_RichTextEditor_VRule2);
     
                    // resize link TextInput control...
                    linkTextInput.width = toolbar.width;
                }
            ]]>
        </mx:Script>
     
    </mx:RichTextEditor>

    Peter

Comments are closed.