0 Replies Latest reply on Dec 26, 2013 4:14 AM by Babulal

    Stylesheet problem in TextArea

    Babulal

      Hi,

       

      I want to edit content from textarea after adding the stylesheet. In my below sample code it has two textarea.

      I added stylesheet in textarea1 so that i can't able to edit content.

      In textarea2 has only html content but when i alert it gets unwanted Textformat tags(I don't want those tags how can i restrict).

       

      StyledEditor.mxml

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

         

          <fx:Script>

              <![CDATA[

                  import mx.controls.Alert;

                  private var styleSheet:StyleSheet;

                  private var txt:String = "";

                 

                  private function init():void {

                      var css:String = "h1 {font-size: 30;color:#FF0000;}p{font-size: 14;color:#00ff00;}a {text-decoration: underline;}a:hover {color: #FF0000;}div{font-size: 25;color:#0000FF;border:2px solid;} ";

                      styleSheet = new StyleSheet();               

                      styleSheet.parseCSS(css);

                      textArea1.styleSheet = styleSheet;

                      txt = "<h1>Welcome</h1><p>this <font color='#333333' font-weight='bold'>is</font> para</p><div>This is div</div>";

                      textArea1.htmlText = txt;

                      textArea2.htmlText = txt;

                  }

                             

                  private function check():void{

                      Alert.show("Test");

                      Alert.show("Text Area1:"+textArea1.htmlText);

                      Alert.show("Text Area2:"+textArea2.htmlText);

                  }

              ]]>

          </fx:Script>

         

          <mx:VDividedBox horizontalScrollPolicy="on" height="2000">

              <mx:Button id="click" label="Click" click="check()">

                 

              </mx:Button>

              <mx:TextArea id="textArea1" editable="true"

                           condenseWhite="true" width="400"

                           height="210">

              </mx:TextArea>

             

              <mx:TextArea id="textArea2" editable="true"

                           condenseWhite="true" width="400"

                           height="210" >

              </mx:TextArea>

          </mx:VDividedBox>

         

      </s:WindowedApplication>

       

      Text Area1:<h1>Welcome</h1><p>this <font color='#333333' font-weight='bold'>is</font> para</p><div>This is div</div>

       

      Text Area2:<TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">Welcomethis <FONT COLOR="#333333">is</FONT> para<FONT COLOR="#333333"></FONT></FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="12" COLOR="#000000" LETTERSPACING="0" KERNING="0">This is div</FONT></P></TEXTFORMAT>