반응형
Exporting a TextFlow object in Flex 4
The following example shows how you can export a TextFlow object in Flex 4 by using the TextConverter class (flashx.textLayout.conversion.TextConverter), and specifying HTML format, plain text format, or Text Layout Format.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ --> <s:Application name="Spark_TextConverter_export_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:comps="comps.*"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" /> </s:layout> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.ConversionType; import flashx.textLayout.conversion.TextConverter; ]]> </fx:Script> <comps:CustomEditor id="customEditor" /> <s:HGroup> <s:Button id="htmlBtn" label="Export as HTML" click="debug.text = TextConverter.export(customEditor.editor.textFlow, TextConverter.HTML_FORMAT, ConversionType.STRING_TYPE).toString();" /> <s:Button id="plainTxtBtn" label="Export as plain text" click="debug.text = TextConverter.export(customEditor.editor.textFlow, TextConverter.PLAIN_TEXT_FORMAT, ConversionType.STRING_TYPE).toString();" /> <s:Button id="tlfBtn" label="Export as TLF" click="debug.text = TextConverter.export(customEditor.editor.textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.STRING_TYPE).toString();" /> </s:HGroup> <s:TextArea id="debug" width="100%" height="100%" /> </s:Application>
View source is enabled in the following example.
And the custom rich text editor component, comps/CustomEditor.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/ --> <s:Panel name="CustomEditor" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" title="SimpleTextEditor" minWidth="400"> <s:layout> <s:VerticalLayout gap="0" /> </s:layout> <fx:Script> <![CDATA[ import flashx.textLayout.conversion.ConversionType; import flashx.textLayout.conversion.TextConverter; import flash.text.engine.FontPosture; import flash.text.engine.FontWeight; import flashx.textLayout.formats.TextAlign; import flashx.textLayout.formats.TextDecoration; import flashx.textLayout.formats.TextLayoutFormat; import mx.events.ColorPickerEvent; import mx.events.FlexEvent; import spark.events.IndexChangeEvent; protected function editor_selectionChangeHandler(evt:FlexEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); fontDDL.selectedItem = txtLayFmt.fontFamily; sizeDDL.selectedItem = txtLayFmt.fontSize; boldBtn.selected = (txtLayFmt.fontWeight == FontWeight.BOLD); italBtn.selected = (txtLayFmt.fontStyle == FontPosture.ITALIC); underBtn.selected = (txtLayFmt.textDecoration == TextDecoration.UNDERLINE); colorCP.selectedColor = txtLayFmt.color; lineBtn.selected = txtLayFmt.lineThrough; switch (txtLayFmt.textAlign) { case TextAlign.LEFT: txtAlignBB.selectedIndex = 0; break; case TextAlign.CENTER: txtAlignBB.selectedIndex = 1; break; case TextAlign.RIGHT: txtAlignBB.selectedIndex = 2; break; case TextAlign.JUSTIFY: txtAlignBB.selectedIndex = 3; break; default: txtAlignBB.selectedIndex = -1; break; } } protected function fontDDL_changeHandler(evt:IndexChangeEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.fontFamily = fontDDL.selectedItem; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function sizeDDL_changeHandler(evt:IndexChangeEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.fontSize = sizeDDL.selectedItem; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function boldBtn_clickHandler(evt:MouseEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.fontWeight = (txtLayFmt.fontWeight == FontWeight.BOLD) ? FontWeight.NORMAL : FontWeight.BOLD; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function italBtn_clickHandler(evt:MouseEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.fontStyle = (txtLayFmt.fontStyle == FontPosture.ITALIC) ? FontPosture.NORMAL : FontPosture.ITALIC; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function underBtn_clickHandler(evt:MouseEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.textDecoration = (txtLayFmt.fontStyle == TextDecoration.UNDERLINE) ? TextDecoration.NONE : TextDecoration.UNDERLINE; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function colorCP_changeHandler(evt:ColorPickerEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.color = colorCP.selectedColor; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } protected function txtAlignBB_changeHandler(evt:IndexChangeEvent):void { if (txtAlignBB.selectedItem) { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.textAlign = txtAlignBB.selectedItem.value; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } } protected function lineBtn_clickHandler(evt:MouseEvent):void { var txtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null, editor.selectionAnchorPosition, editor.selectionActivePosition); txtLayFmt.lineThrough = lineBtn.selected; editor.setFormatOfRange(txtLayFmt, editor.selectionAnchorPosition, editor.selectionActivePosition); editor.setFocus(); } ]]> </fx:Script> <s:TextArea id="editor" focusEnabled="false" width="100%" height="100%" minHeight="200" selectionChange="editor_selectionChangeHandler(event);"> <s:textFlow> <s:TextFlow paragraphSpaceBefore="20"> <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nunc quis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis. Phasellus dui orci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismod gravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabitur vitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentum elit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar. Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, ac dignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nunc vehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenas eget ipsum ac mauris dictum congue eu id justo.</s:p> <s:p>Aliquam tincidunt tempor nisi id porta. Aenean risus dolor, tincidunt a ultrices in, laoreet eu ante. Mauris vel lacus neque, ut scelerisque eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel lacus sit amet erat vehicula malesuada id in augue. Sed purus massa, placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncus arcu. Duis semper bibendum facilisis. Duis nibh lorem, egestas rutrum tincidunt non, vulputate accumsan nulla. Nunc ligula nisl, ultrices ut tempor quis, rutrum et enim. Nullam accumsan scelerisque ante id pretium. Mauris nibh metus, blandit in varius congue, pharetra sit amet sem. Phasellus tincidunt lacus quis est semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortor commodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui non eros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentum lacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p> <s:p>Etiam ut eros lectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod, nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orci ut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metus ullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nunc sollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felis leo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdiet gravida felis a eleifend.</s:p> <s:p>Suspendisse mattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed molestie arcu. Praesent ut tellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sit amet aliquet enim sodales non. Maecenas in velit sit amet tellus tincidunt dapibus. Vivamus est eros, iaculis et venenatis a, malesuada vel lacus. Aliquam vel orci tortor. Etiam ornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesque sodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisis accumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellus vehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretium est.</s:p> <s:p>Maecenas tristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatis neque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitae elit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesent in orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mi rutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit amet semper a, pretium vel leo. Etiam mollis dolor nec elit suscipit imperdiet. Sed a est eros.</s:p> </s:TextFlow> </s:textFlow> </s:TextArea> <mx:ControlBar width="100%" cornerRadius="0"> <mx:ToolBar width="100%" horizontalGap="5"> <s:DropDownList id="fontDDL" width="150" change="fontDDL_changeHandler(event);"> <s:dataProvider> <s:ArrayList source="[Arial,Verdana,Times New Roman,Trebuchet MS]" /> </s:dataProvider> </s:DropDownList> <s:DropDownList id="sizeDDL" width="60" change="sizeDDL_changeHandler(event);"> <s:dataProvider> <s:ArrayList source="[8,10,12,14,16,24,36,72]" /> </s:dataProvider> </s:DropDownList> <s:ToggleButton id="boldBtn" label="B" fontWeight="bold" width="30" click="boldBtn_clickHandler(event);" /> <s:ToggleButton id="italBtn" label="I" fontStyle="italic" width="30" click="italBtn_clickHandler(event);" /> <s:ToggleButton id="underBtn" label="U" textDecoration="underline" width="30" click="underBtn_clickHandler(event);" /> <s:ToggleButton id="lineBtn" label="S" lineThrough="true" width="30" click="lineBtn_clickHandler(event);" /> <mx:ColorPicker id="colorCP" change="colorCP_changeHandler(event);" /> <s:ButtonBar id="txtAlignBB" arrowKeysWrapFocus="true" labelField="label" width="120" change="txtAlignBB_changeHandler(event);"> <s:dataProvider> <s:ArrayList> <fx:Object label="L" value="{TextAlign.LEFT}" /> <fx:Object label="C" value="{TextAlign.CENTER}" /> <fx:Object label="R" value="{TextAlign.RIGHT}" /> <fx:Object label="J" value="{TextAlign.JUSTIFY}" /> </s:ArrayList> </s:dataProvider> </s:ButtonBar> </mx:ToolBar> </mx:ControlBar> </s:Panel>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
