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>

Answer 1

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;
        }
    }
}