Why Flex AS3 TextArea Htmltext changes format on event

Question

This is giving me no sleep, I've added my test application here. Just copy and paste to test the application adds well formatted html text to a text area on clicking 'add' then on clicking 'go' I take this html text out to another Text area and I see the text has changed format where the tags get muddled up.

My end goal is to regex the html text out to another format for another interface. However this muddeling of tags is causing me headaches.

Any solutions to prevent or rectify this would be much appreciated.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"  xmlns:ns1="com.tree.*">
    <mx:Script>
    <![CDATA[
        private function init():void        {
            originalTA.text='<TEXTFORMAT LEADING="-2">'+ '<P ALIGN="JUSTIFY">'+ '<FONT SIZE="26" COLOR="#9B0000" LETTERSPACING="0" KERNING="0"> some text </FONT> '+ '<FONT SIZE="26" COLOR="#BEBEBE"> some text  </FONT> '+ '<FONT SIZE="26" COLOR="#9B0000" LETTERSPACING="0" KERNING="0"> some text </FONT>'+ '</P>'+ '</TEXTFORMAT>';
        }

        private function add():void {
            viewDTA.htmlText=originalTA.text;
        }

        private function go():void {
            htmlTA.text=viewDTA.htmlText;
        }
    ]]>
    </mx:Script>
    <mx:HBox width="100%" height="100%">
        <mx:Label text="input"/>
        <mx:TextArea id="originalTA" height="100%" width="100%"/>
        <mx:Button label="add" click="add()"/>
        <mx:Label text="view"/>
        <mx:TextArea id="viewDTA" height="100%" width="100%"/>
        <mx:Button label="go" click="go()"/>
    </mx:HBox>
    <mx:HBox width="100%" height="100%">
        <mx:Label text="html"/>
        <mx:TextArea id="htmlTA" height="100%" width="100%"/>
    </mx:HBox>
</mx:Application>

Hi there jason - YES!!! NICE ONE!! - Now just a method to see if the text has been edited and some then some regex wizardry ...However - looking at flex 4 with RichEditableText...Thank you somuch for taking the time to answer — Murray, Jan 11 '11 at 15:12
Awesome! I'm glad to hear that helped. If you mark it as the accepted answer (by clicking on the checkmark by the answer) it will help others that may have a similar issue in the future. — Jason Towne, Jan 11 '11 at 20:04
Hi there - Im being lazy now... but any idea how i could access this in/from a function in the class. public function get OriginalTextflowFormatted():String { //Alert.show(this.OriginalHTMLText); return convertToFormattedtext(this.OriginalHTMLText); } public static function convertToFormattedtext(str:String):String{ formatting code... } i currently get TypeError: Error #1009: Cannot access a property or method of a null object reference. — Murray, Jan 12 '11 at 10:23
It's hard to read code entered into comments. Try asking another question with your code in there. — Jason Towne, Jan 12 '11 at 16:38

score 0 · Accepted Answer · answered Dec 04 '10 at 02:22

When you set a value to the TextArea.htmlText property Flex automatically inserts additional HTML markup corresponding to the defaultTextFormat set from the CSS styles.

To get around this behavior, I would create a new component that extends the TextArea component and overrides the set htmlText function to store the original text in a new variable called OriginalHTMLText you can access later to get the original HTML text.

Try using this as a starting point:

package
{
    import mx.controls.TextArea;

    public class HTMLStaticTextArea extends TextArea
    {
        public var OriginalHTMLText:String = "";

        public function HTMLStaticTextArea()
        {
            super();
        }

        override public function set htmlText(value:String):void
        {
            super.htmlText = value;
            OriginalHTMLText = value;
        }
    }
}

Why Flex AS3 TextArea Htmltext changes format on event

1 Answers1