We are using the mx:RichTextEditor to edit a description of some sort…. the html that the rich texteditor outputs is the following

<TEXTFORMAT LEADING=“2”><P ALIGN=“LEFT”><FONT FACE=“Verdana” SIZE=“10” COLOR=“#0B333C” LETTERSPACING=“0” KERNING=“0”>test</FONT></P></TEXTFORMAT>

If you copy and past this code into an html page, the font shows up huge much like so:

test

Ryan Stille, Jason H. of CFWebtools and I spent a little time researching what we could do to fix this issue… not very complicated, but it’s surely bothersome to us, as well as the clients. I’m not all that proficient with regular expressions… so that is where Ryan came in great.


What you can do is take your htmlText of the rich text editor and do a while loop on the htmlText, and replace your SIZE=”##” WITH STYLE=”font-size: ##”.

You will want to make sure that your Rich Text editor has it’s ID attribute assigned

<mx:Script>
<![CDATA[
private function testReg():void{
var tempString:String = testText.htmlText;
trace(“tempString: “ + tempString);
var pattern:RegExp = new RegExp(“SIZE=\”([0-9]{1,2})\“”,“g”); trace(“pattern :” + pattern.toString());

var result:Object;
/*
there is a really bad practice fix that i’m going to do
right now the pattern is case sensitive… i’m going to
put the size=“#” back in but in lower case, so the text editor still recognizes the different sizes
*/

while(result=pattern.exec(tempString)){
trace(tempString=tempString.replace(pattern, “STYLE=\”font-size: $1px\” size=\”$1\“”));
}
}

]]>
</mx:Script>
<mx:RichTextEditor id=“testText” htmlText=“test”/>
<mx:Button click=“testReg()”/>

Result:

<TEXTFORMAT LEADING=“2”><P ALIGN=“LEFT”><FONT FACE=“Verdana” STYLE=“font-size: 10px” COLOR=“#0B333C” LETTERSPACING=“0” KERNING=“0”>test</FONT></P></TEXTFORMAT>

Now you can show this off and it works fantastic and displays like so:

test