Hiding nested controls in a Flex RichTextEditor control (remix)

By Peter deHaan On December 4, 2007 · 9 Comments

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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

9 Responses to Hiding nested controls in a Flex RichTextEditor control (remix)

Mark says:

December 5, 2007 at 7:02 am

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?

Reply
webdev.andrei says:

March 31, 2008 at 1:45 am

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.

Reply

Paul says:

April 11, 2008 at 4:22 pm

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

morphy says:

January 15, 2009 at 6:52 am

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.

Reply
- dr3d says:
  
  February 15, 2010 at 10:21 am
  
  you’re going to have to subclass RichTextEditor in order to be able to access those protected components
  
  Reply
Taniguchi Toshio, J. says:

June 19, 2009 at 4:09 am

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!

Reply
Peter deHaan says:

June 19, 2009 at 7:12 am

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

Reply

Peter deHaan says:

February 17, 2010 at 3:46 pm

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

Peter deHaan says:

February 17, 2010 at 4:32 pm

Done; http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/

Reply

M	T	W	T	F	S	S
« Nov				Jan »
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Just a bunch of Adobe Flex Examples

Hiding nested controls in a Flex RichTextEditor control (remix)

Peter deHaan

Add Widgets (Content Sidebar)

9 Responses to Hiding nested controls in a Flex RichTextEditor control (remix)

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More