mx:RichTextEditor issues Font Too Large

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

4 comments on this post.
  1. CustomRichTextEditor with XHTML text | Axelology:

    […] written on the the mx.controls.RichTextEditor before in flex… and there are some issues with the HTML that it outputs. That post states […]

  2. Caroline B:

    Same issue, Different resolution:
    I also had this HUGE FONT issue. The outputted RTE html was sent to a db and then output to a .jsp. I could not run the <![CDATA[ regex before it went to the db. I tried many regex's on my jsp, none worked. I tried jQuery and this worked for me:

    jQuery(document).ready(function() {
    $(‘p font’).css(“font-size”, “11”);
    });

    This jquery outputs the following code:

    See how it adds “style=”font-size: 11px;””
    (hope this formats well). Thought I’d share since my RTE code was sent immediately to a database and needed to be edited on a different page other than the original mxml.

    [best regards]

  3. Caroline B:

    This is the jQuery rendered code:

    font color=”#222222″ face=”Verdana” size=”11″ style=”font-size: 11px;” KERNING=”0″ LETTERSPACING=”0″

    [regards]

  4. polyGeek:

    Awesome work. Saved me a boat load of time and worked perfectly.

Leave a comment