Flex 4 ：导出 TextFlow 对象

最新推荐文章于 2024-04-16 10:05:19 发布

KevinLau2016

最新推荐文章于 2024-04-16 10:05:19 发布

阅读量2.3k

点赞数

分类专栏： Flex 文章标签： flex layout library null integer button

Flex 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

此例展示了如何使用TextConverter 类（flashx.textLayout.conversion.TextConverter）、指定 HTML 格式、解析文本格式或 Text Layout 格式，来导出 TextFlow 对象。
更多 Flex 4 示例，请到 http://www.slsay.com

<?xml version="1.0" encoding="utf-8"?>
<!-- http://yecon.blog.hexun.com/35470870_a.html -->
<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[
            importflashx.textLayout.conversion.ConversionType;
            importflashx.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 asplain text"
                click="debug.text =TextConverter.export(customEditor.editor.textFlow,
                                       TextConverter.PLAIN_TEXT_FORMAT,
                                       ConversionType.STRING_TYPE).toString();" />
        <s:Button id="tlfBtn"
                label="Export asTLF"
                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>

-------------------------------------
自定义富文本编辑控件comps/CustomEditor.mxml 如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://yecon.blog.hexun.com/35470870_a.html -->
<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[
            importflashx.textLayout.conversion.ConversionType;
            importflashx.textLayout.conversion.TextConverter;
            importflash.text.engine.FontPosture;
            importflash.text.engine.FontWeight;
            importflashx.textLayout.formats.TextAlign;
            importflashx.textLayout.formats.TextDecoration;
            importflashx.textLayout.formats.TextLayoutFormat;
            import mx.events.ColorPickerEvent;
            import mx.events.FlexEvent;
            importspark.events.IndexChangeEvent;
 
            protected functioneditor_selectionChangeHandler(evt:FlexEvent):void {
                vartxtLayFmt: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;
                    caseTextAlign.CENTER:
                       txtAlignBB.selectedIndex = 1;
                        break;
                    case TextAlign.RIGHT:
                       txtAlignBB.selectedIndex = 2;
                        break;
                    caseTextAlign.JUSTIFY:
                       txtAlignBB.selectedIndex = 3;
                        break;
                    default:
                       txtAlignBB.selectedIndex = -1;
                        break;
                }
            }
 
            protected functionfontDDL_changeHandler(evt:IndexChangeEvent):void {
                vartxtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                    editor.selectionAnchorPosition,
                                   editor.selectionActivePosition);
                txtLayFmt.fontFamily =fontDDL.selectedItem;
                editor.setFormatOfRange(txtLayFmt,
                                   editor.selectionAnchorPosition,
                                   editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected functionsizeDDL_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 functionboldBtn_clickHandler(evt:MouseEvent):void {
                vartxtLayFmt: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 functionitalBtn_clickHandler(evt:MouseEvent):void {
                vartxtLayFmt: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 functionunderBtn_clickHandler(evt:MouseEvent):void {
                vartxtLayFmt: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 functioncolorCP_changeHandler(evt:ColorPickerEvent):void {
                vartxtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                   editor.selectionAnchorPosition,
                                   editor.selectionActivePosition);
                txtLayFmt.color =colorCP.selectedColor;
                editor.setFormatOfRange(txtLayFmt,
                                   editor.selectionAnchorPosition,
                                   editor.selectionActivePosition);
                editor.setFocus();
            }
 
            protected functiontxtAlignBB_changeHandler(evt:IndexChangeEvent):void {
                if (txtAlignBB.selectedItem){
                    vartxtLayFmt:TextLayoutFormat = editor.getFormatOfRange(null,
                                        editor.selectionAnchorPosition,
                                       editor.selectionActivePosition);
                    txtLayFmt.textAlign =txtAlignBB.selectedItem.value;
                   editor.setFormatOfRange(txtLayFmt,
                                        editor.selectionAnchorPosition,
                                       editor.selectionActivePosition);
                    editor.setFocus();
                }
            }
 
            protected functionlineBtn_clickHandler(evt:MouseEvent):void {
                vartxtLayFmt: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:TextFlowparagraphSpaceBefore="20">
                <s:p>Lorem ipsumdolor sit amet, consectetur adipiscing elit. Duis et nibh lorem. Nulla ut velit magna. Nuncquis libero ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urnalacinia congue. Duis nec leo turpis. Phasellus duiorci, lacinia in dictum lacinia, ullamcorper a tortor. Suspendisse lacinia, turpis vel euismodgravida, turpis dui vulputate libero, vel consequat enim sem nec mauris. Curabiturvitae magna vel neque accumsan commodo vitae quis ipsum. Nullam ac condimentumelit. Integer eget magna ac mi fermentum luctus. Ut pharetra auctor pulvinar.Duis lobortis, nulla at vestibulum tincidunt, ante neque scelerisque risus, acdignissim nunc nisl rhoncus risus. Cras pretium egestas purus, a commodo nuncvehicula at. Fusce vestibulum enim in mi hendrerit a viverra justo tempor. Maecenaseget ipsum ac mauris dictum congue eu id justo.</s:p>
                <s:p>Aliquamtincidunt 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, perinceptos himenaeos. Donec vel lacus sit amet eratvehicula malesuada id in augue. Sed purus massa,placerat non imperdiet nec, venenatis a nulla. Donec vel ligula leo, in rhoncusarcu. 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 quisest semper ut rhoncus sem pretium. Lorem ipsum dolor sit amet, consecteturadipiscing elit. Nullam pulvinar, enim eu consectetur venenatis, dui tortorcommodo ante, sit amet sagittis libero odio cursus neque. Aliquam a dui noneros placerat euismod. In at mattis felis. Suspendisse potenti. Morbi posuere condimentumlacus. Suspendisse tellus magna, viverra ac mattis vel, adipiscing eget lectus.</s:p>
                <s:p>Etiam ut eroslectus. Praesent nec massa nibh. Cras venenatis, ligula in condimentum euismod,nisl lorem hendrerit lacus, a imperdiet odio est et odio. Suspendisse eu orciut augue commodo gravida sed eu risus. Vestibulum venenatis erat ac metusullamcorper blandit. Integer et sem enim. Vivamus a arcu metus. Nuncsollicitudin commodo placerat. Maecenas vehicula, massa et auctor tempor, felisleo commodo lorem, eget pulvinar felis turpis nec erat. Mauris imperdietgravida felis a eleifend.</s:p>
                <s:p>Suspendissemattis tempor fringilla. Class aptent taciti sociosqu ad litora torquent perconubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consecteturadipiscing elit. Quisque sed molestie arcu. Praesent uttellus sed orci blandit tristique non eget est. Sed interdum feugiat nisi, sitamet 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. Etiamornare ante eget massa dignissim a auctor nunc pellentesque. Pellentesquesodales porta nisi, pretium accumsan eros tincidunt vitae. Cras facilisisaccumsan purus ultricies lacinia. Praesent consequat elit imperdiet tellusvehicula ut ornare mauris mattis. Suspendisse non tortor nisl. Etiam ac pretiumest.</s:p>
                <s:p>Maecenastristique, velit aliquam faucibus ornare, justo erat porta elit, sed venenatisneque mi ac elit. Nullam enim metus, gravida ac euismod sit amet, commodo vitaeelit. Quisque eget molestie ante. Nulla fermentum pretium augue non tristique. Praesentin orci eu diam ultrices sodales ac quis leo. Aliquam lobortis elit quis mirutrum feugiat. Aenean sed elit turpis. Duis enim ligula, posuere sit ametsemper a, pretium vel leo. Etiam mollis dolor nec elitsuscipit 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:ArrayListsource="[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:Objectlabel="L" value="{TextAlign.LEFT}" />
                        <fx:Objectlabel="C" value="{TextAlign.CENTER}" />
                        <fx:Objectlabel="R" value="{TextAlign.RIGHT}" />
                        <fx:Objectlabel="J" value="{TextAlign.JUSTIFY}" />
                    </s:ArrayList>
                </s:dataProvider>
            </s:ButtonBar>
        </mx:ToolBar>
    </mx:ControlBar>
 
</s:Panel>

英文原文地址：http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/

原文连接：http://yecon.blog.hexun.com/35470870_d.html