A Flash Developer Resource Site

Results 1 to 18 of 18

Thread: WYSIWYG text editor in AS3?

  1. #1
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185

    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.
    --- Ronze ---

  2. #2
    Senior Member joshstrike's Avatar
    Join Date
    Jan 2001
    Location
    Alhama de Granada, España
    Posts
    1,131
    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...

  3. #3
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185
    But is there a way to detect what part of the text the user has selected when pressing a button?
    --- Ronze ---

  4. #4
    Member
    Join Date
    Oct 2000
    Posts
    93
    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.

  5. #5
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185
    Thanks alot... I'll check it out!
    --- Ronze ---

  6. #6
    Senior Member joshstrike's Avatar
    Join Date
    Jan 2001
    Location
    Alhama de Granada, España
    Posts
    1,131
    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...

  7. #7
    Member
    Join Date
    Oct 2000
    Posts
    93
    Quote 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:TextFormatbeginIndex:int = -1endIndex:int = -1):void 
    Quote 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.setTextFormatformat2,  821);
    tf.setTextFormatformat2,  2732);
    tf.setTextFormatformat3,  32tf.text.length );

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

  8. #8
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185
    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??
    --- Ronze ---

  9. #9
    Member
    Join Date
    Oct 2000
    Posts
    93
    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.

  10. #10
    Senior Member joshstrike's Avatar
    Join Date
    Jan 2001
    Location
    Alhama de Granada, España
    Posts
    1,131
    I stand corrected.

  11. #11
    Member
    Join Date
    Oct 2000
    Posts
    93
    We all have things to learn

  12. #12
    Senior Member
    Join Date
    Aug 2002
    Location
    Dublin, Ireland
    Posts
    1,749
    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...

  13. #13
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185
    But if I make it using the TextFormat, can I then export it as HTML to the database?
    --- Ronze ---

  14. #14
    Member
    Join Date
    Oct 2000
    Posts
    93
    Quote 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.

  15. #15
    Senior Member joshstrike's Avatar
    Join Date
    Jan 2001
    Location
    Alhama de Granada, España
    Posts
    1,131
    Wow. Nice feature. I had no freakin' idea.

  16. #16
    Ronze Ronze's Avatar
    Join Date
    Oct 2002
    Location
    Copenhagen, Denmark
    Posts
    185
    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?
    --- Ronze ---

  17. #17
    Senior Member
    Join Date
    Aug 2002
    Location
    Dublin, Ireland
    Posts
    1,749
    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.

  18. #18
    Member
    Join Date
    Oct 2000
    Posts
    93
    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 2732 );
    var 
    t:TextFormat tf.getTextFormat tf.selectionBeginIndextf.selectionEndIndex );
    trace t.bold ); //true

    // Select a portion and get format
    tf.setSelection 032 );
    tf.getTextFormat tf.selectionBeginIndextf.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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center