创建基于Flex的Text Editor.doc

选择开源文本编辑器如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 Java代码 1. 2. Event(name=change,type=flash.events.Event) 3. DefaultTriggerEvent(change) 4. Event(name=change, type=flash.events.Event) DefaultTriggerEvent(change) 声明变量。 Java代码 1. privatevarpreviousTextFormat:TextFormat=null; private var previousTextFormat:TextFormat = null; 重载createChildren()方法（初始化） Java代码 1. / 2. /overridden 3. / 4. overrideprotectedfunctioncreateChildren():void 5. super.createChildren(); 6. createTextField(-1); 7. / /overridden / override protected function createChildren():void super.createChildren(); createTextField(-1); 创建TextField控件本身，添加事件处理器。 Java代码 1. privatefunctioncreateTextField(childIndex:int):void 2. if(textField)return; 3. 4. textField=IUITextField(createInFontContext(UITextField); 5. /textField. 6. textField.autoSize=TextFieldAutoSize.NONE; 7. textField.enabled=enabled; 8. textField.ignorePadding=true; 9. textField.multiline=true; 10. textField.selectable=true; 11. textField.styleName=this; 12. textField.tabEnabled=true; 13. textField.type=TextFieldType.INPUT; 14. textField.useRichTextClipboard=true; 15. textField.wordWrap=true; 16. 17. textField.addEventListener(Event.CHANGE,textField_changeHandler); 18. textField.addEventListener(Event.SCROLL,textField_scrollHandler); 19. textField.addEventListener(TextEvent.TEXT_INPUT, 20. textField_textInputHandler); 21. 22. 23. if(childIndex=-1) 24. addChild(DisplayObject(textField); 25. /updateDisplayList(); 26. 27. 28. 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(); 应用文本格式 Java代码 1. publicfunctionsetTextStyles(type:String,value:Object=null):void 2. vartf:TextFormat; 3. 4. varbeginIndex:int=textField.selectionBeginIndex; 5. varendIndex:int=textField.selectionEndIndex; 6. 7. if(beginIndex=endIndex) 8. 9. tf=previousTextFormat; 10. 11. else 12. tf=newTextFormat(); 13. 14. if(type=bold|type=italic|type=underline) 15. 16. tftype=value; 17. 18. elseif(type=align|type=bullet) 19. 20. if(beginIndex=endIndex) 21. 22. tf=newTextFormat(); 23. 24. 25. /Applytheparagraphstylestothewholeparagraphinsteadofjust 26. /theselectedtext 27. beginIndex=textField.getFirstCharInParagraph(beginIndex)-1; 28. beginIndex=Math.max(0,beginIndex); 29. endIndex=textField.getFirstCharInParagraph(endIndex)+ 30. textField.getParagraphLength(endIndex)-1; 31. tftype=value; 32. if(!previousTextFormat) 33. previousTextFormat=newTextFormat(); 34. previousTextFormattype=value; 35. if(!endIndex) 36. textField.defaultTextFormat=tf; 37. 38. elseif(type=font) 39. 40. tftype=fontFamilyCombo.text; 41. 42. elseif(type=size) 43. 44. varfontSize:uint=uint(fontSizeCombo.text); 45. if(fontSize0) 46. tftype=fontSize; 47. 48. elseif(type=color) 49. 50. tftype=uint(colorPicker.selectedColor); 51. 52. 53. if(beginIndex=endIndex) 54. 55. previousTextFormat=tf; 56. 57. else58. 59. textField.setTextFormat(tf,beginIndex,endIndex); 60. 61. 62. dispatchEvent(newEvent(change); 63. 64. varcaretIndex:int=textField.caretIndex; 65. varlineIndex:int=textField.getLineIndexOfChar(caretIndex); 66. 67. textField.invalidateDisplayList(); 68. 69. callLater(textField.setFocus); 70. public function setTextStyles(type:String, value:Object = null):voidvar tf:TextFormat;var beginIndex:int = textField.selectionBeginIndex;var endIndex:int = textField.selectionEndIndex;if (beginIndex = endIndex)tf = previousTextFormat;elsetf = new TextFormat();if (type = bold | type = italic | type = underline)tftype = 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 textbeginIndex = textField.getFirstCharInParagraph(beginIndex) - 1;beginIndex = Math.max(0, beginIndex);endIndex = textField.getFirstCharInParagraph(endIndex) +textField.getParagraphLength(endIndex) - 1;tftype = value;if(!previousTextFormat) previousTextFormat = new TextFormat();previousTextFormattype = value;if (!endIndex)textField.defaultTextFormat = tf;else if (type = font)tftype = fontFamilyCombo.text;else if (type = size)var fontSize:uint = uint(fontSizeCombo.text);if (fontSize 0)tftype = fontSize;else if (type = color)tftype = uint(colorPicker.selectedColor);if (beginIndex = endIndex)previousTextFormat = tf;elsetextField.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，编辑工具条 Java代码 1. 2. 3. 8. 13. 14. 17. 20. 23. 24. 26. 27. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 41. 42. 3.在test.xml引用该组件 Java代码 1. 2. 3. 4. Panel 5. borderAlpha:1; 6. borderThicknessLeft:0; 7. borderThicknessTop:0; 8. borderThicknessBottom:0; 9. borderThicknessRight:0; 10. roundedBottomCorners:true; 11. headerHeight:23; 12. highlightAlphas:0,0.12; 13. headerColors:#4e84df,#0f6cc3; 14. footerColors:#efaa15,#e6780c; 15. titleStyleName:mypanelTitle; 16. 17. .mypanelTitle 18. color:#ffffff; 19. fontSize:12; 20. fontWeight:bold; 21. 22. ControlBar 23. paddingTop:2px; 24.