Skip to main content
September 14, 2010
Question

Text edit in flex 4

  • September 14, 2010
  • 1 reply
  • 1186 views

Hi, im trying to get some text in my application, but i can't seem to get it done while keeping the formating i had on my office document.

I can't use paragraphs or bold on the Rich Text zone.

what am i doing wrong?

This topic has been closed for replies.

1 reply

Adobe Employee
September 14, 2010

I think I need a little more information in order to give a helpful answer. If you are inserting the text programmatically, you can do it either using mxml markup, or using an HTML syntax similar to what was supported in Textfield. Here's a simple example from the online reference:

<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Spark RichEditableText primitive. -->
<s:Application name="RichEditableTextExample"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:XML id="extTxtFlow" source="externalTextFlow.xml" />
    </fx:Declarations>

    <s:Panel title="RichText textFlow test"
            width="90%" height="90%"
            horizontalCenter="0" verticalCenter="0">
        <s:Scroller width="100%" height="100%">
            <s:VGroup paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
                <s:RichEditableText id="richTxt1" textAlign="justify" percentWidth="100">
                    <s:textFlow>
                        <s:TextFlow>
                            <s:p fontSize="24">Inline TextFlow</s:p>
                            <s:p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet tristique libero, vel mattis massa pellentesque nec. Maecenas non nulla nibh, et egestas ligula. Etiam massa mauris, elementum gravida rhoncus sit amet, blandit eu lacus. Proin nisi felis, accumsan at interdum eu, mattis at velit. Nulla at ipsum risus. Nullam non justo vel lacus vulputate mollis id quis libero.</s:p>
                            <s:p>2) Cras posuere posuere sem, eu congue orci mattis quis. Morbi vitae est ut purus vestibulum iaculis malesuada quis metus. Donec feugiat sapien quis turpis porttitor vel mattis libero viverra. Sed nisl justo, fringilla eget ultrices ut, venenatis quis magna. Nulla feugiat egestas mattis. Phasellus sed dignissim justo. Etiam malesuada bibendum urna, id dapibus nulla posuere eu.</s:p>
                            <s:p>3) Curabitur pulvinar tellus venenatis ipsum tempus lobortis. Vestibulum eros velit, bibendum at aliquet ut, placerat sed mauris.</s:p>
                        </s:TextFlow>
                    </s:textFlow>
                </s:RichEditableText>

                <s:RichEditableText id="richTxt2" textAlign="justify" width="100%"
                        textFlow="{TextConverter.importToFlow(extTxtFlow, TextConverter.TEXT_LAYOUT_FORMAT)}" />
            </s:VGroup>
        </s:Scroller>
    </s:Panel>

</s:Application>

This shows two ways of entering the text, the first one using straight mxml markup in the application, 
and the other that imports text dynamically. If you want to use HTML instead if TEXT_LAYOUT_FORMAT, 
use TextConverter.TEXT_FIELD_HTML_FORMAT in the call to importToFlow. The HTML syntax follows roughly 
what is described for TextField.

If things are not working, perhaps you could post an example that doesn't work.

Thanks,

- robin

September 14, 2010

Hi there, and thanks for the swift reply. Unfortunatly that quite doesn't solve my problema. I see the text as normal text, without any space in between the paragraphs. What i was looking for was

Bem vindos ao Quiz show, onde as categorias serão:

A cappela

Videos

Sons

Perguntas

Desenho

All of the lines should have 1 paragraph between them. like using <br> in html.

Adobe Employee
September 14, 2010

If you are just typing, you can insert extra paragraphs using the return key. If you are using markup, you can add an empty paragraph like this:

<p></p>

or <p/>

If you would rather do this via formatting attributes, you can automatically add space after every paragraph with the paragraphSpaceAfter attribute. Just apply it to the whole TextFlow, with the number of pixels you want to add after the paragraph. Here's an example of that:

<TextFlow fontFamily="Times New Roman" fontSize="14" paddingLeft="4" paddingTop="4" paragraphSpaceAfter="15a" textIndent="15" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><p><span>Hello</span></p><p><span>Second Paragraph</span></p></TextFlow>