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

本次较上一篇自定义文本组件新增对文字的大小写修改, 实现全部大写, 首字母大写以及还原成改变大小写之前文本状态. 这次把测试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>