How do I get formatted text in flash?

Question

It is simple to format text with setTextFormat. But is there any affective method for retrieving all the styling that has been made on the text? getTextFormat is known but it doesn't work on text that varies in formatting. Any ideas?

Answer 1

This is a lot of work, to say the least.

I recommend an existing rich text editor that you can plug in to your solution, such as obedit : http://www.oblius.com/projects/obedit/ (donationware)

Edit:

Okay, in response to your comment, you code a rich text editor by implementing a styled text standard, such as text/enriched MIME content-type (http://tools.ietf.org/html/rfc1896) or, more likely, Rich Text Format (http://msdn.microsoft.com/en-us/library/aa140277(office.10).aspx). You could also use HTML or create your own syntax.

Say the user types The quick brown fox jumps over the lazy dog. User highlights "quick" and clicks the bold button (which you supply), highlights fox and changes foreground to red (with a color picker that you supply). Hidden from view, you change the value of your data field to something like The \bquick\b brown \{color:red}fox\{\color} jumps over the lazy dog.

Now the user highlights the whole line and sets it to green. You change the hidden value to \{color:green}The \bquick\b brown fox jumps over the lazy dog.\{color} Notice that you've had to parse the line to identify and remove the conflicting color markup. What if the user wants to undo that change? Have you saved the version with the red fox? When the user enters new text at the end of the line, do you consider the caret to be inside or outside of the green color tag?

When you reload the value, you again have to parse the line and then convert all the formatting to something Flash can display, stripping out the tags.

Reinventing the wheel is not much fun.

Answer 2

As you said, getTextFormat(beginIndex:int = -1, endIndex:int = -1) just returns a TextFormat object populated with formatting information for the specified range of text (Only properties that are common to the entire text specified are set in the resulting TextFormat object).

If you want the formatting information of the whole text, read the htmlText property of the TextField after calling setTextFormat. It contains the HTML representation of the text field's contents.

var str:String = "The quick brown fox jumps over the lazy dog\n";
var tf:TextField = new TextField();
tf.multiline = true;
tf.text = str + str + str;
var f:TextFormat = new TextFormat("Arial", 15, 0xFF0000, true, false, 
    true, null, null, TextFormatAlign.CENTER);
tf.setTextFormat(f, 0, str.length);
f = new TextFormat("Courier New", 12, 0x00FF00, false, false, 
    false, "http://www.google.com", null, TextFormatAlign.LEFT);
tf.setTextFormat(f, str.length, 2 * str.length);
f = new TextFormat("Times New Roman", 12, 0x0000FF, false, true, 
    true, null, null, TextFormatAlign.RIGHT);
tf.setTextFormat(f, 2 * str.length, str.length * 3);
tf.width = 400;
tf.height = 300
addChild(tf);
trace(tf.htmlText);

The output is:

<P ALIGN="CENTER">
    <FONT FACE="Arial" SIZE="15" COLOR="#FF0000" LETTERSPACING="0" KERNING="0">
        <B>
            <U>The quick brown fox jumps over the lazy dog</U>
        </B>
    </FONT>
</P>
<P ALIGN="LEFT">
    <FONT FACE="Courier New" SIZE="12" COLOR="#00FF00" LETTERSPACING="0" KERNING="0">
        <A HREF="http://www.google.com" TARGET="">The quick brown fox jumps over the lazy dog</A>
    </FONT>
</P>
<P ALIGN="RIGHT">
    <FONT FACE="Times New Roman" SIZE="12" COLOR="#0000FF" LETTERSPACING="0" KERNING="0">
        <I>
            <U>The quick brown fox jumps over the lazy dog</U>
        </I>
    </FONT>
</P>