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;
Full code after the jump.
<?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.
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?
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.
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);