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 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.