-
Ronze
WYSIWYG text editor in AS3?
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.
-
Senior Member
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?
-
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!
-
Senior Member
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...
-
Originally Posted by joshstrike
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:
PHP Code:
public function setTextFormat(format:TextFormat, beginIndex:int = -1, endIndex:int = -1):void
Originally Posted by joshstrike
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:
PHP Code:
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??
-
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.
-
Senior Member
-
We all have things to learn
-
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?
-
Originally Posted by Ronze
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:
Code:
<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.
-
Senior Member
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?
-
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.
-
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:
PHP Code:
// 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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|