20分钟创建基于Flex的Text Editor

选择开源文本编辑器如TinyMCE、FCKeditor，当然是不错的选择，但定制自己的Text Editor也不困难。最近使用Flex开发Editor，研究了一下Flex自带的RichTextEditor，发现其工作原理非常简单。为了研究其工作原理及不足，我使用两个核心类自定义了一个Editor，效果图见附件。欢迎拍砖。


目标：用Flex定制自己的Text Editor
功能：字体，大小，粗体，斜体，下划线，列表（Bullet），对齐方式（Alignment），字体颜色。
开发环境：Flex Builder 3

简介：

    熟悉《设计模式》一书的开发人员都知道，此书从文档编辑器（document editor）展开讨论，引出数十种设计模式。本文对此不作讨论，我们所关注的是如何实现文档编辑器本身。更深入更复杂的例子，可以参考Jexi(参考价值更大，但没有实现Table)，TinyMCE。
    

相关内容：

    核心类--TextField和TextFormat

    TextField和TextFormat是实现文本编辑器的核心部件。TextField包含了文本的输入、显示和格式化功能，还有光标、选中(selection)处理。TextField是DisplayObject，可以作为子元素添加到Container上。TextFormat是Util类，负责表示用户设置的格式（Style）。

    事件处理

    用户交互，少不了事件处理。TextEvent类专门用于处理和Text相关的事件，例如用户键盘输入或点击一个超链接(Link)。除了TextEvent，还需要处理一些自定义的事件，例如文本区域的内容、格式改变。
  
如何创建：

1.新建Flex Application，工程命名为test。
2.新建MXML Component，基类是Panel类。
     
      声明Event
     

      <mx:Metadata>
	       [Event(name="change", type="flash.events.Event")]
	       [DefaultTriggerEvent("change")]
      </mx:Metadata>

    
      声明变量。
     

      private var previousTextFormat:TextFormat = null;

      重载createChildren()方法（初始化）
      

       ////////////////////////////////
       //overridden 
       ////////////////////////////////
       override protected function createChildren():void{
	         super.createChildren();
	         createTextField(-1);					
       }			
       

     
      创建TextField控件本身，添加事件处理器。
     

      private function createTextField(childIndex:int):void{
          if(textField)return;
	      
	  textField = IUITextField(createInFontContext(UITextField));
	  //textField.
	  textField.autoSize = TextFieldAutoSize.NONE;
	  textField.enabled = enabled;
	  textField.ignorePadding = true;
	  textField.multiline = true;
	  textField.selectable = true;
	  textField.styleName = this;
	  textField.tabEnabled = true;
	  textField.type = TextFieldType.INPUT;
	  textField.useRichTextClipboard = true;
	  textField.wordWrap = true;
	
	  textField.addEventListener(Event.CHANGE, textField_changeHandler);
	  textField.addEventListener(Event.SCROLL, textField_scrollHandler);
	  textField.addEventListener(TextEvent.TEXT_INPUT,
	                                       textField_textInputHandler);
	                                     
	            
	  if (childIndex == -1){
	       addChild(DisplayObject(textField));
	       //updateDisplayList();
	  }                
            
	}

        应用文本格式
       

public function setTextStyles(type:String, value:Object = null):void{
				var tf:TextFormat;

				var beginIndex:int = textField.selectionBeginIndex;
				var endIndex:int = textField.selectionEndIndex;
		
				if (beginIndex == endIndex)
				{
					tf = previousTextFormat;
				}
				else	
					tf = new TextFormat();
				
				if (type == "bold" || type == "italic" || type == "underline")
				{
					tf[type] = value;
				}
				else if (type == "align" || type == "bullet")
				{
					if (beginIndex == endIndex)
					{
						tf = new TextFormat();
					}
		
					// Apply the paragraph styles to the whole paragraph instead of just 
					// the selected text
					beginIndex = textField.getFirstCharInParagraph(beginIndex) - 1;
					beginIndex = Math.max(0, beginIndex);
					endIndex = textField.getFirstCharInParagraph(endIndex) +
						textField.getParagraphLength(endIndex) - 1;
					tf[type] = value;
					if(!previousTextFormat) 
						previousTextFormat = new TextFormat();
					previousTextFormat[type] = value;
					if (!endIndex)
						textField.defaultTextFormat = tf;
				}
				else if (type == "font")
				{
					tf[type] = fontFamilyCombo.text;
				}
				else if (type == "size")
				{
					var fontSize:uint = uint(fontSizeCombo.text);
					if (fontSize > 0)
						tf[type] = fontSize;
				}
				else if (type == "color")
				{
					tf[type] = uint(colorPicker.selectedColor);
				}
						
				if (beginIndex == endIndex)
				{
					previousTextFormat = tf;
				}
				else
				{
					textField.setTextFormat(tf,beginIndex,endIndex);
				}
		
				dispatchEvent(new Event("change"));
				
				var caretIndex:int = textField.caretIndex;
				var lineIndex:int =	textField.getLineIndexOfChar(caretIndex);
		
				textField.invalidateDisplayList();			
		
				callLater(textField.setFocus);
			}

        添加ControlBar，编辑工具条
       

			<mx:ControlBar width="100%" > 
				<mx:ToolBar id="toolbar" width="100%" horizontalGap="7">			
					<mx:ComboBox id="fontFamilyCombo" editable="true"
						creationComplete=""
						dataProvider = "{fontFamilyArray}"
						close="setTextStyles('font');"
						enter="setTextStyles('font');"/>		
					<mx:ComboBox id="fontSizeCombo" editable="true"
						paddingLeft="2" paddingRight="2"
						dataProvider = "{fontSizeArray}"
						close="setTextStyles('size');"
						enter="setTextStyles('size');"/>							 
					<mx:HBox id="toolBar2" horizontalGap="0">		
						<mx:Button id="boldButton" width="20" toggle="true"							
								   icon="@Embed('icon_style_bold.png')"
								   click="setTextStyles('bold', event.currentTarget.selected);" /> 						
						<mx:Button id="italicButton" width="20" toggle="true"
								   icon="@Embed('icon_style_italic.png')"
								   click="setTextStyles('italic', event.currentTarget.selected);" /> 						
						<mx:Button id="underlineButton" width="20" toggle="true"
								   icon="@Embed('icon_style_underline.png')"
								   click="setTextStyles('underline', event.currentTarget.selected);" />		
					</mx:HBox>				
					<mx:ColorPicker id="colorPicker" width="22" height="22"
								close="setTextStyles('color');"/>		
					<mx:VRule height="{alignButtons.height}"/>		
					<mx:ToggleButtonBar id="alignButtons" buttonWidth="20"
									itemClick="setTextStyles('align', ToggleButtonBar(event.currentTarget).dataProvider.getItemAt(ToggleButtonBar(event.currentTarget).selectedIndex).action); " >
						<mx:dataProvider>
							<mx:Array> 
								<mx:Object icon="@Embed('icon_align_left.png')" action="left"/>
								<mx:Object icon="@Embed('icon_align_center.png')" action="center"/>
								<mx:Object icon="@Embed('icon_align_right.png')" action="right"/>
								<mx:Object icon="@Embed('icon_align_justify.png')" action="justify"/>
							</mx:Array>
						</mx:dataProvider>
					</mx:ToggleButtonBar>
					<mx:Button id="bulletButton" width="20" toggle="true"
						   icon="@Embed('icon_bullet.png')"
						   click="setTextStyles('bullet', event.currentTarget.selected);" />					 				
				</mx:ToolBar>
			</mx:ControlBar> 

  3.在test.xml引用该组件

     

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:NewEditor="*">
	<mx:Style>
		Panel {
           borderAlpha: 1;
           borderThicknessLeft: 0;
           borderThicknessTop: 0;
           borderThicknessBottom: 0;
           borderThicknessRight: 0;
           roundedBottomCorners: true;
           headerHeight: 23;
           highlightAlphas: 0, 0.12;
           headerColors: #4e84df, #0f6cc3;
           footerColors: #efaa15, #e6780c;
           titleStyleName: "mypanelTitle";
        }
        .mypanelTitle {
           color: #ffffff;
           fontSize: 12;
           fontWeight:bold;
        }
        ControlBar {
            paddingTop:2px;
            paddingBottom:2px;
            height:15px;
        }
	</mx:Style>
	<NewEditor:NewEditor title="Text Editor" height="50%" />		
</mx:Application>

     
       注意，我们为Panel和ControlBar添加了样式（Style）。

问题和不足：

    上述自定义Editor基于RichTextEditor（基于TextArea），有兴趣的读者可以研究它们。本文探讨如何实现简易的文本Editor。真正的Editor，包含很多类型的图元编辑，例如文本、图像、表格。由于TextField和TextFormat仅限于文本功能，因此要实现图像和表格编辑，还有很多的工作要做，甚至要抛弃TextField和TextFormat，设计一套基于Glygh的图元渲染系统。限于篇幅，不再进一步讨论。