WYSIWYG text editor in AS3?

[Ronze]

Hey everyone

I'm trying to make a rich text editor with Actionscript 3 and Flash CS3. I have a textfield, and a bold, italic and underline button. I too have a align left, right and center button.

But how would you go about editing the text in the textfield?
How can I tell flash to e.g. make the text I have selected in the textfield bold?

If anyone have some quick suggestions, I would be really great.

[joshstrike]

The only type of TextField in Flash that can handle more than one format is an html field. You need to set:

myTextField.html = true;

then when you add text:

myTextField.htmlText = "whatever";

At that point, you need to code such that html tags like b, i, etc. are wrapped around the selected html text...

[Ronze]

But is there a way to detect what part of the text the user has selected when pressing a button?

[jjcorreia]

You dont need to use html text. Html text will just cause anti aliasing problems.

What you need to do is read up on classes in the flash.text package. For instance, the flash.text.TextFormat class. You can create a text formatting object, and then change a textfield by using TextField.setTextFormat. If you want to know what text they have selected, use the TextField.selectionBeginIndex and TextField.selectionEndIndex etc (read up on the TextField class and its properties). Theres a lot more functionality if you read up on it.

[Ronze]

Thanks alot... I'll check it out!

[joshstrike]

TextFormat objects apply to an entire text field. You can't apply them to only some text in the field.
It is NOT true that htmlText causes anti-aliasing problems. You just need to apply a TextFormat to the htmlText field, and then embed the font you're using. The TextFormat you apply will be the base font for the text in that field; things like bolds and italics must be put in as html tags, that is the ONLY way to make some text in a TextField appear bold or italic, and other text in the same field not.
You're going to need to make some intelligent decisions about what to do with the tags in the field you're looking at; how to remove them if they're unnecessary; also how to force them to be entered in the right order. It would not do to have your code place a bold tag before an italic tag, then the closing bold tag before the closing italic tag, for example: this will not display properly...

[jjcorreia]

TextFormat objects apply to an entire text field. You can't apply them to only some text in the field.

Not true. I've been applying them to portions of TextFields for a long time. I recommended it because I use it.

You should read up on it as well. Notice:

public function setTextFormat(format:TextFormat, beginIndex:int = -1, endIndex:int = -1):void 

things like bolds and italics must be put in as html tags, that is the ONLY way to make some text in a TextField appear bold or italic, and other text in the same field not.

Thats also completely incorrect. He doesnt need to mess with html, or html tags. The TextFormat class can handle bold and italics (as well as many other settings) without needing to use html tags. Paste this into a new file and see for yourself:

import flash.text.*;

var tf:TextField = new TextField();
tf.autoSize = TextFieldAutoSize.LEFT;

// Formats
    var format:TextFormat = new TextFormat();
    format.font = "Verdana";
    format.color = 0x000000;
    format.size = 12;
    
    var format2:TextFormat = new TextFormat();
    format2.font = "Arial";
    format2.color = 0xFF0000;
    format2.size = 16;
    format2.bold = true;
    format2.underline = true;
    
    var format3:TextFormat = new TextFormat();
    format3.italic = true;
    
tf.defaultTextFormat = format;
tf.text = "This is text that has been multi formatted";

// Set the formats
tf.setTextFormat( format2,  8, 21);
tf.setTextFormat( format2,  27, 32);
tf.setTextFormat( format3,  32, tf.text.length );

addChild(tf); 

If you do want to use html text, note also that you can use style sheets (flash.text.StyleSheet).

[Ronze]

Ok... but if I have to store the edited text with all the text format for alter viewing, then I have to store it in a database - and then I have to store it as HTML??

[jjcorreia]

If you want to store it in a database then yes you may possibly have to. If you do use html tags then you can use selectionBeginIndex and selectionEndIndex as I mentioned earlier to add the tags in their proper places.

[joshstrike]

I stand corrected.

[jjcorreia]

We all have things to learn

[AlsoGaiusCoffey]

As an aside, and to support jjcorreia because I did it the same way (at least in AS 2.0, only downloaded CS3 today), the TextFormat not only updates the display, but also the htmlText property.
This is _way_ easier than editing the HTML string itself...

[Ronze]

But if I make it using the TextFormat, can I then export it as HTML to the database?

[jjcorreia]

But if I make it using the TextFormat, can I then export it as HTML to the database?

Yes. Just do as I showed earlier. It seems the TextFormat object automatically creates html tags for you, so all you have to do is get TextField.htmlText.

Add trace ( tf.htmlText ) to my above example (at the end) and you will see. It returns:

<P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is <FONT FACE="Arial" SIZE="16" COLOR="#FF0000"><B><U>text that has</U></B></FONT> been <FONT FACE="Arial" SIZE="16" COLOR="#FF0000"><B><U>multi</U></B><FONT FACE="Verdana" SIZE="12" COLOR="#000000"><I> formatted</I></FONT></FONT></FONT></P>

You can then store that in your database.

[joshstrike]

Wow. Nice feature. I had no freakin' idea.

[Ronze]

Ok.. here's another question regarding this.

If I say I have the text: "Hello World". Let's say the word "world" is bold.
If "world" is selected and the user press the bold button, I want it to clear the bold formatting. How do I do this?

You know: Make it check whether or not the text is bold or not?

[AlsoGaiusCoffey]

Not sure what has changed in AS 3.0, in AS 2.0, I would have used getTextFormat along with Selection object to tell which text is selected.

[jjcorreia]

Yes, TextField.getTextFormat is still available and can be used. However, if the selection contains mixed properties; like part of it is bold and part isnt; then it will return that property as null.

Add this to the end of the earlier example:

// Select a portion and get format
tf.setSelection ( 27, 32 );
var t:TextFormat = tf.getTextFormat ( tf.selectionBeginIndex, tf.selectionEndIndex );
trace ( t.bold ); //true

// Select a portion and get format
tf.setSelection ( 0, 32 );
t = tf.getTextFormat ( tf.selectionBeginIndex, tf.selectionEndIndex );
trace ( t.bold ); // null