自定义文本编辑组件(二)

本次较上一篇自定义文本组件新增对文字的大小写修改, 实现全部大写, 首字母大写以及还原成改变大小写之前文本状态. 这次把测试Demo也放上来, 以作参考.

TextElem.as

package textCompment{public class TextElem extends UIComponent implements ITextElem{/**水平布局常量--左对齐*/public static const HORIZONTAL_LEFT:String = "left";/**水平布局常量--居中对齐*/public static const HORIZONTAL_CENTER:String = "center";/**水平布局常量--右对齐*/public static const HORIZONTAL_RIGHT:String = "right";/**垂直布局常量--上对齐*/public static const VERTICAL_TOP:String = "top";/**垂直布局常量--居中对齐*/public static const VERTICAL_MIDDLE:String = "middle";/**垂直布局常量--下对齐*/public static const VERTICAL_BOTTOM:String = "bottom";/**文字内容*/private var _text:String;/**是否可编辑*/private var _editable:Boolean = true;/**当前水平布局方式*/private var _currentHorizontalAlign:String;/**当前垂直布局方式*/private var _currentVerticalAlign:String;/**当前组件中文本部分*/private var textField:TextField = new TextField();/**文本格式*/private var textFormat:TextFormat;/**显示对象滚动矩形范围*/private var rect:Rectangle = new Rectangle(0, 0);//文本原件备份private var previousText:String;/**构造函数*/public function TextElem(){super();this.addEventListener(FlexEvent.CREATION_COMPLETE, init);textField.addEventListener(Event.CHANGE, textChangeHandler);this.addEventListener(FocusEvent.FOCUS_IN, textFocusInHandler);}/** * 焦点移入监听事件 * @parameter e FocusEvent */private function textFocusInHandler(event:FocusEvent):void{IME.enabled = true;}/** * 文本编辑监听事件 * @parameter e Event */private function textChangeHandler(event:Event):void{this._text = textField.text;//校正文本垂直布局if(this._currentVerticalAlign == TextElem.VERTICAL_MIDDLE){this.textField.y = Math.round(this.height/2 - this.textField.height/2);} else if(this._currentVerticalAlign == TextElem.VERTICAL_TOP){this.textField.y = 0;}else if(this._currentVerticalAlign == TextElem.VERTICAL_BOTTOM){this.textField.y = Math.round(this.height - this.textField.height);}//校正文本输入时显示if(textField.height > this.height){this.textField.y = Math.round(this.height - this.textField.height);}//校正文本大小写格式if(this._currentUpperOrLower == "uppercaseAllLetters"){textField.text = textField.text.toLocaleUpperCase();textField.restrict = "^a-z";}else if(this._currentUpperOrLower == "uppercaseFirstLetter"){if(textField.text.charAt(textField.text.length - 1) == " " || textField.text.length == 0){textField.restrict = "^a-z";}else {textField.restrict = "^A-Z";}}else if(this._currentUpperOrLower == "normal"){textField.restrict = null;recordNormalText();}}/** * 初始化创建完成监听事件 * @parameter e FlexEvent */private function init(event:FlexEvent):void{this.graphics.lineStyle(1, 0x00ff00, 1);this.graphics.moveTo(0, 0);this.graphics.lineTo(0, this.height);this.graphics.lineTo(this.width, this.height);this.graphics.lineTo(this.width, 0);this.graphics.lineTo(0, 0);textField.border = true;textField.borderColor = 0xff0000;textField.autoSize="left";textField.multiline = true;textField.wordWrap = true;textField.type = TextFieldType.INPUT;textField.y = Math.round(this.height/2 - this.textField.height/2);textField.width = this.width;textFormat = new TextFormat();textFormat.align = TextElem.HORIZONTAL_CENTER;textFormat.bold = false;textFormat.color = 0x000000;textFormat.italic = false;textFormat.size = 12;textFormat.underline = false;textField.defaultTextFormat = textFormat;rect.width = this.width + 2;rect.height = this.height + 2;this.scrollRect = rect;this.addChild(textField);this._currentHorizontalAlign = TextElem.HORIZONTAL_CENTER;this._currentVerticalAlign = TextElem.VERTICAL_MIDDLE;this.doubleClickEnabled = true;}/** * 设置文本格式 * @parameter format 文本格式 * @parameter beginIndex 开始字符索引 * @parameter endIndex 结束字符索引 */public function setTextFormat(format:TextFormat, beginIndex:int=-1, endIndex:int=-1):void{this.textFormat = format;if(textField.length == 0){textField.defaultTextFormat = textFormat;}else {this.textField.setTextFormat(textFormat, beginIndex, endIndex);}}/** * 获取文本格式 * @parameter beginIndex 开始字符索引 * @parameter endIndex 结束字符索引 * @return 所选部分的文本格式 */public function getTextFormat(beginIndex:int=-1, endIndex:int=-1):TextFormat{var tf:TextFormat = textField.getTextFormat(beginIndex, endIndex);return tf;}/**更新布局(组件拉伸的时候调用)*/public function updateLayout():void{}/** * 设置组件大小 * @parameter width 组件宽度 * @parameter height 组件高度 */public function setSize(width:Number, height:Number):void{this.width = textField.width = width;this.height = height;rect.width = width + 2;rect.height = height + 2;this.scrollRect = rect;if(this._currentVerticalAlign == TextElem.VERTICAL_MIDDLE){textField.y = Math.round((this.height / 2) - (textField.height / 2));}else if(this._currentVerticalAlign == TextElem.VERTICAL_BOTTOM){textField.y = this.height - textField.height;}else if(this._currentVerticalAlign == TextElem.VERTICAL_TOP){textField.y = 0;}if(textField.height > this.height){this.textField.y = Math.round(this.height - this.textField.height);}}/** * 设置文本编辑状态 * @parameter value 布尔值, 表示文本是否可编辑, 可编辑为true, 不可编辑为false */public function set isEdited(value:Boolean):void{if(value == true){this.textField.type = TextFieldType.INPUT;}else{this.textField.type = TextFieldType.DYNAMIC;}this._editable = value;}/** * 获取文本编辑状态 * @return 表示文本是否可编辑的布尔值, 可编辑为true, 不可编辑为false */public function get isEdited():Boolean{return this._editable;}/** * 设置文本内容 * @parameter value 文本中输入的字符串 */public function set text(value:String):void{this._text = textField.text = value;}/** * 设置文本内容 * @return 文本中输入的字符串 */public function get text():String{return _text;}/** * 设置文本水平布局方式 * @parameter value 代表水平对齐方式的字符串 * TextElem.HORIZONTAL_LEFT 左对齐 * TextElem.HORIZONTAL_CENTER 居中对齐 * TextElem.HORIZONTAL_RIGHT 右对齐 */public function set horizontalAlign(value:String):void{this._currentHorizontalAlign = this.textFormat.align = value;if(textField.length == 0){textField.defaultTextFormat = textFormat;}else {this.textField.setTextFormat(textFormat);}}/** * 获取文本水平布局方式 * @return 代表水平对齐方式的字符串 * TextElem.HORIZONTAL_LEFT 左对齐 * TextElem.HORIZONTAL_CENTER 居中对齐 * TextElem.HORIZONTAL_RIGHT 右对齐 */public function get horizontalAlign():String{return _currentHorizontalAlign;}/** * 设置文本垂直布局方式 * @parameter value 代表垂直对齐方式的字符串 * TextElem.VERTICAL_TOP 上对齐 * TextElem.VERTICAL_MIDDLE 居中对齐 * TextElem.VERTICAL_BOTTOM 下对齐 */public function set verticalAlign(value:String):void{this._currentVerticalAlign = value;if(value == TextElem.VERTICAL_MIDDLE){textField.y = Math.round((this.height / 2) - (textField.height / 2));}else if(value == TextElem.VERTICAL_BOTTOM){textField.y = this.height - textField.height;}else if(value == TextElem.VERTICAL_TOP){textField.y = 0;}}/** * 获取文本垂直布局方式 * @return 代表垂直对齐方式的字符串 * TextElem.VERTICAL_TOP 上对齐 * TextElem.VERTICAL_MIDDLE 居中对齐 * TextElem.VERTICAL_BOTTOM 下对齐 */public function get verticalAlign():String{return this._currentVerticalAlign;}/** * 获取文本选中部分开始索引值 * @return 文本选中部分开始索引值 */public function get selectionBeginIndex():int{return this.textField.selectionBeginIndex;}/** * 获取文本选中部分末尾索引值 * @return 文本选中部分末尾索引值 */public function get selectionEndIndex():int{return this.textField.selectionEndIndex;}/** * 获取文本字符串长度值 * @return 当前组件中输入文本字符串长度值 */public function get length():int{return this.textField.length;}/**当前文本大小写状态*/private var _currentUpperOrLower:String = "normal";/** * 获取当前文本大小写状态 * @return _currentUpperOrLower 当前文本大小写状态 */public function get currentUpperOrLower():String{return this._currentUpperOrLower;}/** * 改变文本大小写 * @parameter changeName大小写名称 * uppercaseAllLetters : 全部大写 * uppercaseFirstLetter : 首字母大写 * normal : 正常 */public function changeUpperOrLowerCase(changeName:String):void{if(changeName == "uppercaseAllLetters"){textField.text = textField.text.toLocaleUpperCase();}else if(changeName == "uppercaseFirstLetter"){firstUpperCase();}else if(changeName == "normal"){textField.restrict = null;recoverNormalText();}this._currentUpperOrLower = changeName;}/**首字母大写*/private function firstUpperCase():void{var arr:Array = textField.text.toLocaleLowerCase().split(" ");var newText:String = "";for(var i:int=0; i<arr.length; i++){var word:String = arr[i].toString().charAt(0).toLocaleUpperCase() + arr[i].toString().substring(1);newText += word + " ";if(i == arr.length - 1 && textField.text.charAt(textField.text.length - 1) != " "){newText = newText.substring(0, newText.length - 1);}}textField.text = newText;}/**记录正常状态下文本中大写字母集合*/private var normalArr:Array = new Array();/**记录正常状态下文本*/private function recordNormalText():void{if(normalArr.length != 0){normalArr.splice(0, normalArr.length);}if(textField.length != 0){for(var i:int=0; i<textField.length; i++){if(textField.text.charAt(i).match(new RegExp(/^[A-Z]/)) != null){normalArr.push(i);}}}}/**恢复原文本大小写*/private function recoverNormalText():void{if(normalArr.length != 0){var t:String = textField.text.toLocaleLowerCase();for(var i:int=0; i<normalArr.length; i++){var ps:String = t.substring(0, normalArr[i]);var cs:String = t.charAt(normalArr[i]).toLocaleUpperCase();var ns:String = t.substring(normalArr[i] + 1);t = ps + cs + ns;}textField.text = t;}}}}

Test.mxml

<?xml version="1.0" encoding="utf-8"?><s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"    xmlns:mx="library://ns.adobe.com/flex/mx"   width="800" height="600"   creationComplete="init(event)"><s:layout><s:HorizontalLayout/></s:layout><fx:Script><![CDATA[[Bindable]private var fontSize:ArrayCollection = new ArrayCollection([{id:1, size:10},{id:2, size:15},{id:3, size:20},{id:4, size:25},{id:5, size:30},]);[Bindable]private var fontList:ArrayCollection;protected function button1_clickHandler(event:MouseEvent):void{textElement = new TextElem();textElement.x = 150;textElement.y = 150;textElement.setSize(300, 200);bc.addElement(textElement);}protected function button2_clickHandler(event:MouseEvent):void{Alert.show(textElement.text);}protected function colorpicker2_changeHandler(event:ColorPickerEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.color = ColorPicker(event.currentTarget).selectedColor;addFormat(tf);}protected function togglebutton1_changeHandler(event:Event):void{textElement.isEdited = true;}protected function button5_clickHandler(event:MouseEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.bold = event.currentTarget.selected;addFormat(tf);}/***********************/private function addFormat(tf:TextFormat):void{if(textElement.length == 0){textElement.setTextFormat(tf);}else if(textElement.selectionBeginIndex == textElement.length) {//当光标在最后位置时, 改变样式(点粗体),最后一个字符会变粗, 正常应该是从新打出的开始变粗, 没改过来textElement.setTextFormat(tf, textElement.length - 1);}else {textElement.setTextFormat(tf, textElement.selectionBeginIndex, textElement.selectionEndIndex);}}protected function togglebutton2_clickHandler(event:MouseEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.italic = event.currentTarget.selected;addFormat(tf);}protected function togglebutton3_clickHandler(event:MouseEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.underline = event.currentTarget.selected;addFormat(tf);}protected function togglebutton4_clickHandler(event:MouseEvent):void{textElement.horizontalAlign = TextElem.HORIZONTAL_LEFT;}protected function togglebutton5_clickHandler(event:MouseEvent):void{textElement.horizontalAlign = TextElem.HORIZONTAL_CENTER;}protected function togglebutton6_clickHandler(event:MouseEvent):void{textElement.horizontalAlign = TextElem.HORIZONTAL_RIGHT;}protected function init(event:FlexEvent):void{//获取本机安装的字体var arr:Array = Font.enumerateFonts(true);arr.sortOn("fontName", Array.CASEINSENSITIVE);fontList = new ArrayCollection(arr);fontFamilyDD.selectedIndex = 0;}/**字体改变*/protected function fontFamilyDD_changeHandler(event:IndexChangeEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.font = DropDownList(event.currentTarget).selectedItem.fontName;addFormat(tf);}protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void{var tf:TextFormat = textElement.getTextFormat();tf.size = DropDownList(event.currentTarget).selectedItem.size;addFormat(tf);}protected function togglebutton7_clickHandler(event:MouseEvent):void{textElement.verticalAlign = TextElem.VERTICAL_MIDDLE;}protected function button8_clickHandler(event:MouseEvent):void{textElement.verticalAlign = TextElem.VERTICAL_TOP;}protected function button9_clickHandler(event:MouseEvent):void{textElement.verticalAlign = TextElem.VERTICAL_BOTTOM;}protected function button10_clickHandler(event:MouseEvent):void{textElement.changeUpperOrLowerCase("normal");}protected function button11_clickHandler(event:MouseEvent):void{textElement.changeUpperOrLowerCase("uppercaseAllLetters");}protected function button12_clickHandler(event:MouseEvent):void{textElement.changeUpperOrLowerCase("uppercaseFirstLetter");}]]></fx:Script><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --></fx:Declarations><s:TileGroup width="200" height="100%"><s:HGroup><s:Button label="添加文本" click="button1_clickHandler(event)"/><s:Button label="获取文本" click="button2_clickHandler(event)"/></s:HGroup><s:HGroup><s:Label text="文本颜色"/><mx:ColorPicker selectedColor="0xFFFFFF" change="colorpicker2_changeHandler(event)"/></s:HGroup><s:HGroup><s:Label text="字体"/><s:DropDownList id="fontFamilyDD" dataProvider="{fontList}" labelField="fontName" change="fontFamilyDD_changeHandler(event)"/></s:HGroup><s:HGroup><s:Label text="字号"/><s:DropDownList dataProvider="{fontSize}" labelField="size" selectedIndex="0" change="dropdownlist1_changeHandler(event)"/></s:HGroup><s:ToggleButton label="加粗" click="button5_clickHandler(event)" selected="false"/><s:ToggleButton label="斜体" click="togglebutton2_clickHandler(event)" selected="false"/><s:ToggleButton label="下划线" selected="false" click="togglebutton3_clickHandler(event)"/><s:Button label="左对齐" click="togglebutton4_clickHandler(event)"/><s:Button label="居中对齐" click="togglebutton5_clickHandler(event)"/><s:Button label="右对齐" click="togglebutton6_clickHandler(event)"/><s:Button label="上对齐" click="button8_clickHandler(event)"/><s:Button label="居中对齐" click="togglebutton7_clickHandler(event)"/><s:Button label="下对齐" click="button9_clickHandler(event)"/><s:ToggleButton label="可编辑" selected="true" change="togglebutton1_changeHandler(event)"/><s:Button label="正常" click="button10_clickHandler(event)"/><s:Button label="全部大写" click="button11_clickHandler(event)"/><s:Button label="每个单词首字母大写" click="button12_clickHandler(event)"/><!--<s:Button label="小型大写字母" click="button12_clickHandler(event)"/>--></s:TileGroup><s:BorderContainer id="bc" width="100%" height="100%" backgroundColor="#AFE4FF"></s:BorderContainer></s:WindowedApplication>