Flex Examples » RichTextEditor http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Removing controls from the MX RichTextEditor control in Flex http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/#comments Thu, 18 Feb 2010 00:31:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=2491 The following example shows how you can remove controls from the MX RichTextEditor control by removing the controls from the display list and resizing the linkTextInput TextInput control.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ --> <mx:Application name="RichTextEditor_linkTextInput_test" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="comps.*" layout="vertical" verticalAlign="middle" backgroundColor="white">   <comps:LinkOnlyRichTextEditor />   </mx:Application>

And the custom RichTextEditor control, comps/LinkOnlyRichTextEditor.mxml, is as [...]]]> The following example shows how you can remove controls from the MX RichTextEditor control by removing the controls from the display list and resizing the linkTextInput TextInput control.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ -->
<mx:Application name="RichTextEditor_linkTextInput_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:LinkOnlyRichTextEditor />
 
</mx:Application>

And the custom RichTextEditor control, comps/LinkOnlyRichTextEditor.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ -->
<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>
 
]]> http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/feed/ 2 Setting the background alpha of the RichTextEditor text area in Flex http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/#comments Mon, 25 Aug 2008 07:55:30 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ In a previous example, Setting the background color of the RichTextEditor text area in Flex, we saw how you could set the background color of the RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

The following example shows how you can set the background alpha of the Flex RichTextEditor control’s nested TextArea [...]]]> In a previous example, Setting the background color of the RichTextEditor text area in Flex, we saw how you could set the background color of the RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

The following example shows how you can set the background alpha of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.SliderEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                richTextEditor.textArea.setStyle("backgroundColor", evt.color);
            }

            private function slider_change(evt:SliderEvent):void {
                richTextEditor.textArea.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="0xFFFFFF"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

You can also set the nested TextArea control’s background alpha in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RichTextEditor {
            textAreaStyleName: rteTextAreaStyles;
        }

        .rteTextAreaStyles {
            backgroundAlpha: 0.3; /* 30% */
            backgroundColor: red;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/feed/ 3 Setting the background color of the RichTextEditor text area in Flex http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/#comments Mon, 25 Aug 2008 07:01:18 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ The following example shows how you can set the background color of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ --> <mx:Application name="RichTextEditor_backgroundColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; private function colorPicker_change(evt:ColorPickerEvent):void { richTextEditor.textArea.setStyle("backgroundColor", [...]]]> The following example shows how you can set the background color of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_backgroundColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                richTextEditor.textArea.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="0xFFFFFF"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

You can also set the nested TextArea control’s background color in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_backgroundColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RichTextEditor {
            textAreaStyleName: rteTextAreaStyles;
        }

        .rteTextAreaStyles {
            backgroundColor: haloSilver;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/feed/ 6 Condensing HTML white space in the RichTextEditor control in Flex http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-richtexteditor-control-in-flex/#comments Fri, 25 Apr 2008 02:25:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-richtexteditor-control-in-flex/ In a previous example, “Condensing HTML white space in the TextArea control in Flex”, we looked at how you could condense HTML formatted text in a TextArea control by setting the condenseWhite property.

The following example shows you how you can condense white space around HTML tags using the Flex RichTextEditor control, the htmlText [...]]]> In a previous example, “Condensing HTML white space in the TextArea control in Flex”, we looked at how you could condense HTML formatted text in a TextArea control by setting the condenseWhite property.

The following example shows you how you can condense white space around HTML tags using the Flex RichTextEditor control, the htmlText property, and the condenseWhite property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                richTextEditor.textArea.condenseWhite = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.html" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="condenseWhite:">
                <mx:CheckBox id="checkBox"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            htmlText="{str}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/24/condensing-html-white-space-in-the-richtexteditor-control-in-flex/feed/ 7 Setting the letter spacing in the RichTextEditor control in Flex http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/#comments Wed, 23 Apr 2008 03:55:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myTextAreaStyleName { fontFamily: Courier; letterSpacing: 3; /* pixels */ } [...]]]> The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myTextAreaStyleName {
            fontFamily: Courier;
            letterSpacing: 3; /* pixels */
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
                cssStyle.setStyle("letterSpacing", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="letterSpacing:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="3"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            text="{str}"
            textAreaStyleName="myTextAreaStyleName"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/feed/ 9 Creating a custom context menu on a RichTextEditor control in Flex http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/#comments Tue, 01 Jan 2008 06:03:35 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/ The following example shows how you can add custom context menu commands to a RichTextEditor control in Flex by setting the contextMenu property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; [Bindable] private var cm:ContextMenu; private function [...]]]> The following example shows how you can add custom context menu commands to a RichTextEditor control in Flex by setting the contextMenu property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            [Bindable]
            private var cm:ContextMenu;

            private function init():void {
                var showSelection:ContextMenuItem = new ContextMenuItem("Show selection");
                showSelection.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, showSelection_menuItemSelect);

                var upperCase:ContextMenuItem = new ContextMenuItem("Convert to upper case");
                upperCase.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, upperCase_menuItemSelect);

                var lowerCase:ContextMenuItem = new ContextMenuItem("Convert to lower case");
                lowerCase.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, lowerCase_menuItemSelect);

                cm = new ContextMenu();
                cm.hideBuiltInItems();
                cm.customItems.push(showSelection);
                cm.customItems.push(upperCase);
                cm.customItems.push(lowerCase);

                richTextEditor.contextMenu = cm;
            }

            private function showSelection_menuItemSelect(evt:ContextMenuEvent):void {
                var selText:String = richTextEditor.selection.text;
                if (selText.length == 0) {
                    Alert.show("Please select some text.", "** ERROR **");
                } else {
                    Alert.show(selText, selText.length + " character(s)");
                }
            }

            private function upperCase_menuItemSelect(evt:ContextMenuEvent):void {
                var selText:String = richTextEditor.selection.text;
                richTextEditor.selection.text = selText.toUpperCase();
            }

            private function lowerCase_menuItemSelect(evt:ContextMenuEvent):void {
                var selText:String = richTextEditor.selection.text;
                richTextEditor.selection.text = selText.toLowerCase();
            }
        ]]>
    </mx:Script>

    <mx:RichTextEditor id="richTextEditor"
            title="Rich Text Editor"
            status="status message"
            width="100%"
            height="100%">
        <mx:text><![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacus est, ullamcorper sit amet, gravida at, viverra sit amet, lacus. Aliquam quis lectus id nisl condimentum hendrerit. Maecenas metus libero, dictum et, scelerisque vel, hendrerit non, felis. Duis venenatis, ligula eu lobortis lobortis, turpis erat eleifend eros, vitae auctor tortor mi in urna. Etiam aliquam, tellus aliquet placerat malesuada, orci sem rhoncus lectus, a elementum neque odio vitae urna. Pellentesque eget felis. Aenean at nisi. Proin felis. Curabitur scelerisque risus eget purus. Sed commodo eros in dolor. Sed quis lectus. Integer iaculis leo quis enim. Maecenas orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean et massa sit amet nibh fermentum accumsan. Maecenas aliquam metus dapibus mi. Pellentesque egestas posuere leo. Maecenas pellentesque diam non augue. Nulla vel nisi sit amet eros suscipit sagittis.]]></mx:text>
    </mx:RichTextEditor>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/31/creating-a-custom-context-menu-on-a-richtexteditor-control-in-flex/feed/ 0 Changing the RichTextEditor control’s style name in Flex http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/#comments Tue, 01 Jan 2008 02:31:35 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ The following example shows how you can change the style name for the Flex RichTextEditor control to the predefined “.opaquePanel” style, by setting the styleName property on the RichTextEditor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:ToggleButtonBar selectedIndex="1" itemClick="richTextEditor.styleName [...]]]> The following example shows how you can change the style name for the Flex RichTextEditor control to the predefined “.opaquePanel” style, by setting the styleName property on the RichTextEditor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar selectedIndex="1"
                itemClick="richTextEditor.styleName = event.item.data;">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="default" data="" />
                    <mx:Object label="opaquePanel" data="opaquePanel" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ToggleButtonBar>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            title="RichTextEditor"
            status="version {richTextEditor.getStyle('version')}"
            styleName="opaquePanel"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

As of the December 4, 2007 build, the defaults.css file (in the installed SDK folder’s \frameworks\projects\framework\ folder) lists the “.opaquePanel” style as:

.opaquePanel
{
	backgroundColor: #FFFFFF;
	borderAlpha: 1;
	borderColor: #FFFFFF;
	footerColors: #E7E7E7, #C7C7C7;
	headerColors: #E7E7E7, #D9D9D9;
}
 
]]> http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/feed/ 2 Toggling the control bar in a Flex RichTextEditor control (redux) http://blog.flexexamples.com/2007/12/31/toggling-the-control-bar-in-a-flex-richtexteditor-control-redux/ http://blog.flexexamples.com/2007/12/31/toggling-the-control-bar-in-a-flex-richtexteditor-control-redux/#comments Tue, 01 Jan 2008 01:56:36 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/toggling-the-control-bar-in-a-flex-richtexteditor-control-redux/ It seems that I’ve covered this before, “Toggling the control bar in a Flex RichTextEditor control”, but here is another useful way to toggle the control bar in a Flex RichTextEditor control. The following example shows how you can toggle the RichTextEditor control’s control bar by moving the mouse cursor over or out of [...]]]> It seems that I’ve covered this before, “Toggling the control bar in a Flex RichTextEditor control”, but here is another useful way to toggle the control bar in a Flex RichTextEditor control. The following example shows how you can toggle the RichTextEditor control’s control bar by moving the mouse cursor over or out of the RichTextEditor instance.

Full code after the jump.

View MXML

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

    <mx:RichTextEditor id="richTextEditor"
            title="RichTextEditor"
            status="version {richTextEditor.getStyle('version')}"
            showControlBar="false"
            cornerRadius="0"
            width="100%"
            height="100%"
            rollOut="richTextEditor.showControlBar = false;"
            rollOver="richTextEditor.showControlBar = true;" />

    <mx:Label text="Roll over the RichTextEditor control above to toggle the control bar." />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/31/toggling-the-control-bar-in-a-flex-richtexteditor-control-redux/feed/ 3 Hiding nested controls in a Flex RichTextEditor control (remix) http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/ http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/#comments Wed, 05 Dec 2007 06:44:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/04/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 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.

 
]]> http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/feed/ 9 Hiding nested controls in a Flex RichTextEditor control http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/#comments Sat, 24 Nov 2007 07:01:31 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ The following example shows you how you can toggle the RichTextEditor control’s nested link text input by setting both the visible and includeInLayout properties of the control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.TextInput; private function toggle_linkTextInput():void [...]]]> The following example shows you how you can toggle the RichTextEditor control’s nested link text input by setting both the visible and includeInLayout properties of the control.

Full code after the jump.

View MXML

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

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;

            private function toggle_linkTextInput():void {
                var textInput:TextInput = richTextEditor.linkTextInput;
                var isSelected:Boolean = checkBox.selected;
                textInput.visible = isSelected;
                textInput.includeInLayout = isSelected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="RichTextEditor linkTextInput visible:"
                labelPlacement="left"
                selected="true"
                change="toggle_linkTextInput();" />
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/feed/ 0