Flex创建文本编辑器代码实例及在线运行效果

博客原址：http://tongqiuyan.blog.163.com/blog/static/19554530220119162275231/

下面的flash是有Flex创建的文本编辑器运行效果：

?

源码如下：

 
 

<?xml?version="1.0"?encoding="utf-8"?> ?
  
  

<mx:Application?xmlns:mx="http://www.adobe.com/2006/mxml"?layout="horizontal"?fontSize="12"> ?

  
  
????<mx:Script> ?
  
  
????????<![CDATA[ ?
  
  
????????????//?导入类库 ?
  
  
????????????import?mx.controls.TextInput; ?
  
  
????????????import?mx.controls.TextArea; ?
  
  
????????????import?mx.events.FlexEvent; ?
  
  
????????????//?定义最大输入字数 ?
  
  
????????????private?const?MAX_CHARS:uint?=?100; ?
  
  
????????????//?设置文本输入区域的最大输入字数 ?
  
  

????????????private?function?richTextEditor_creationComplete(evt:FlexEvent):void ?

  
  
????????????{ ?
  
  
????????????????RichTextEditor(evt.currentTarget).textArea.maxChars?=?MAX_CHARS; ?
  
  
????????????} ?
  
  
????????????//?显示当前输入字数和最大字数 ?
  
  

????????????private?function?richTextEditor_change(evt:Event):void ?

  
  
????????????{ ?
  
  

????????????????var?rte:RichTextEditor?=?evt.currentTarget?as?RichTextEditor; ?

  
  

????????????????var?rteTA:TextArea?=?rte.textArea?as?TextArea; ?

  
  

????????????????rte.status?=?rteTA.length?+?"/"+rteTA.maxChars; ?

  
  
????????????} ?
  
  
????????????//?设置工具栏内超链接输入框的显示或者隐藏 ?
  
  

????????????private?function?toogle_linkTextInput():void ?

  
  
????????????{ ?
  
  
????????????????var?textInput:TextInput?=?richTextEditor.linkTextInput; ?
  
  
????????????????var?isSelected:Boolean?=?cbLinkButton.selected; ?
  
  
????????????????textInput.visible?=?isSelected; ?
  
  
????????????????textInput.includeInLayout?=?isSelected; ?
  
  
????????????} ?
  
  
????????]]> ?
  
  
????</mx:Script> ?
  
  

????<mx:Array?id="fontFamilyArr"> ?

  
  
????????<mx:String>Arial</mx:String> ?
  
  
????????<mx:String>Verdana</mx:String> ?
  
  
????????<mx:String>黑体</mx:String> ?
  
  
????????<mx:String>楷体</mx:String> ?
  
  
????</mx:Array> ?
  
  

????<mx:Panel?width="650"?height="400"?layout="horizontal"?title="文本编辑器"> ?

  
  

????????<mx:VBox?height="100%"?width="100%"> ?

  
  

????????????<mx:ApplicationControlBar?dock="true"?width="100%"> ?

  
  

????????????????<mx:CheckBox?id="cbBar"?label="显示工具栏："?selected="true"?/> ?

  
  

????????????????<mx:CheckBox?id="cbLinkButton"?label="显示超链接按钮："?selected="true"?change="toogle_linkTextInput();"?/> ?

  
  
????????????</mx:ApplicationControlBar> ?
  
  

????????????<mx:RichTextEditor?id="richTextEditor"?width="100%"?height="100%"?title="请输入任意文字，并修改格式。"?showToolTips="true"?

  
  

???????????????????????????????fontFamilyToolTip="字体"?colorPickerToolTip="颜色"?showControlBar="{cbBar.selected}"?

  
  

???????????????????????????????change="richTextEditor_change(event);"?creationComplete="richTextEditor_creationComplete(event);"?

  
  

???????????????????????????????fontFamilyArray="{fontFamilyArr}"> ?

  
  
????????????</mx:RichTextEditor> ?
  
  
????????</mx:VBox> ?
  
  
????</mx:Panel> ?
  
  
</mx:Application> ?
 
 

涉及到控件主要是RichTextEditor、VBox、Panel等。??