flex html编辑器

g21121

浏览: 694370 次
性别:
来自: 北京

最近访客更多访客>>

lbyzx123

cuityang

jin361612388

knight_black_bob

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

在flex里有一个组件叫RichTextEditor，它可以编辑简单的文字样式，但是它生成的htmlText却并不是十分符合html规范，所以我简单修改了下，具有复制功能的html编辑器：

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:flexlib="http://code.google.com/p/flexlib/"
			   xmlns:text="com.riaidea.text.*"
			   width="800" height="600" close="PopUpManager.removePopUp(this)" title="编辑器">
	
		<fx:Script>
			<![CDATA[
				import mx.collections.ArrayCollection;
				import mx.controls.Alert;
				import mx.managers.PopUpManager;
				import spark.components.Application;
				
				protected function copyBtn_clickHandler(event:MouseEvent):void
				{
					var context:String=richText.htmlText;
					if(context!=""){
						Alert.show("复制成功","复制内容到剪贴板");
						System.setClipboard(richTextEditorToHtml(context));			
					}else{
						Alert.show("复制失败，请填写内容","复制内容到剪贴板");
					}

				}
				
				protected function clearBtn_clickHandler(event:MouseEvent):void
				{
					richText.htmlText="";
				}
		
				private function richTextEditorToHtml(str:String):String {
					var xml:XML = XML("<BODY>"+str+"</BODY>");
					var t1:XML;
					var t2:XML;
					
					// 移除所有 TEXTFORMAT
					for( t1 = xml..TEXTFORMAT[0]; t1 != null; t1 = xml..TEXTFORMAT[0] ) {
						t1.parent().replace( t1.childIndex(), t1.children() );
					}
					
					// 查找所有 ALIGN
					for each ( t1 in xml..@ALIGN ) {
						t2 = t1.parent();
						t2.@STYLE = "text-align: " + t1 + "; " + t2.@STYLE;
						delete t2.@ALIGN;
					}
					
					// 查找所有 FACE
					for each ( t1 in xml..@FACE ) {
						t2 = t1.parent();
						t2.@STYLE = "font-family: " + t1 + "; " + t2.@STYLE;
						delete t2.@FACE;
					}
					
					// 查找所有 SIZE 
					for each ( t1 in xml..@SIZE ) {
						t2 = t1.parent();
						t2.@STYLE = "font-size: " + t1 + "px; " + t2.@STYLE;
						delete t2.@SIZE;
					}
					
					// 查找所有 COLOR 
					for each ( t1 in xml..@COLOR ) {
						t2 = t1.parent();
						t2.@STYLE = "color: " + t1 + "; " + t2.@STYLE;
						delete t2.@COLOR;
					}
					
					// 查找所有 LETTERSPACING 
					for each ( t1 in xml..@LETTERSPACING ) {
						t2 = t1.parent();
						t2.@STYLE = "letter-spacing: " + t1 + "px; " + t2.@STYLE;
						delete t2.@LETTERSPACING;
					}
					
					// 查找所有 KERNING
					for each ( t1 in xml..@KERNING ) {
						t2 = t1.parent();
						// ? css 
						delete t2.@KERNING;
					}
					
					// 查找所有 <LI>  UL 
					return xml.children().toXMLString();
				}	
				
			]]>
		</fx:Script>
	<s:VGroup width="100%" height="100%" gap="5">
		<mx:RichTextEditor id="richText" width="100%" height="100%" title="请输入描述内容" />
		<s:BorderContainer width="100%" height="34" backgroundColor="#DFDEDE" dropShadowVisible="false">
		<s:HGroup width="100%" gap="20" horizontalAlign="center" verticalAlign="middle"
				  verticalCenter="0">
			<s:Button id="copyBtn" label="复制" click="copyBtn_clickHandler(event)"
					  icon="@Embed('file:///C:/Users/liming/Desktop/imgs/22/edit-copy (3).png')"/>
			<s:Button id="clearBtn" label="清空" click="clearBtn_clickHandler(event)"
					  icon="@Embed('file:///C:/Users/liming/Desktop/imgs/22/edit-clear (3).png')"/>
			
		</s:HGroup>
		</s:BorderContainer>
	</s:VGroup>

</s:TitleWindow>