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



    本文转自 OldHawk  博客园博客,原文链接:http://www.cnblogs.com/taobataoma/archive/2008/01/11/1034772.html ,如需转载请自行联系原作者


相关文章
|
10月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
297 1