在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>