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 ichTextEditor control in Flex by setting the contextMenu property.


layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">

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();
}
]]>

title="Rich Text Editor"
status="status message"
width="100%"
height="100%">