Flex: Export valid HTML from the RichTextEditor

By Mister | Published: August 11, 2006

A recent post on the Flex Coders forum prompted me to create a method to clean up the HTML code produced by the Flex RichTextEditor component. Typically, the code that is produced looks like this from the line:

1
2
3
4
5
6
7
8
9
This is < b > Bold < / b > text.

< TEXTFORMAT LEADING="2" >
< P ALIGN="LEFT" >
< FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0" >
This is < b > Bold < / b >text.
< / FONT >
< / P >
< / TEXTFORMAT >

Now that is a lot of extra code and some of it, though ignored by the browser, is just code used only by Flex (or Flash). What is needed is a way to clean the code and make it more
standard so you can store in the database and use in more places than just Flex. Using RegExp, I created a small function that strips out the invalid code and leaves:

1
2
3
4
5
6
7
8
9
10
11
12
 private function cleanHTML(str:String):String
 {
    var pattern:RegExp = /<TEXTFORMAT.*?>/g;
    var str:String = str.replace(pattern, "");
    pattern = /<FONT.*?>/g;
    str = str.replace(pattern, "");
    pattern = /<\/FONT.*?>/g;
    str = str.replace(pattern, "");
    pattern = /<\/TEXTFORMAT.*?>/g;
    str = str.replace(pattern, "");
    return str;
}

The function produces the following valid HTML code:

1
< p Align="LEFT" >This is < B > Bold < / B > text.< / p >

Using a modified version of the same function, you could also change the code to lowercase or add span tags to replace the formatting that we removed. This gives you much more control over the way your text will be displayed in applications outside of Flex. Perhaps one day Adobe will address this issue with invalid HTML that has been a burden of working with Flash since the early days of Flash. You can view the orignal Flex Coder’s discussion

Flex Coders Original Post

Additional discussions of this topic:

Keith Collins
Alexology

- Mister

  • Facebook
  • Twitter
  • Google Bookmarks
  • RSS
This entry was posted in Flex News and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

44 Comments

  1. Lukas Ruebbelke
    Posted August 27, 2006 at 9:25 pm | Permalink

    Awesome! I was in quite the quandary on this one… on a side note… it is import to escape the forward slashes inside the html tags…

    pattern = //g;
    should be
    pattern = //g;

  2. Mister
    Posted August 28, 2006 at 7:35 am | Permalink

    Glad you found my example helpful and thanks for letting me know about the //g

  3. Ids
    Posted February 8, 2007 at 7:54 am | Permalink

    You can get rid of the textformat tag by putting the following line in your css:

    global{ leading:0;}

  4. Mister
    Posted February 8, 2007 at 8:44 am | Permalink

    Really, I will have to check that out. Seems strange that this would magically kill the tag though. Thanks for the tip!

  5. ulgerman
    Posted March 18, 2007 at 1:43 am | Permalink

    thank you for the code.
    I’ve tried it and added some extra functionality.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    private function cleanHTML(str:String):String
    {
                   var pattern:RegExp = /<TEXTFORMAT.*?>/g;
                   var str:String = str.replace(pattern, "");
                   pattern = /<FONT.*?>/g;
                   str = str.replace(pattern, "");
                   pattern = /<\/FONT.*?>/g;
                   str = str.replace(pattern, "");
                   pattern = /<A HREF/g;
                   str = str.replace(pattern, "<a href");
                   pattern = /<\/A>/g;
                   str = str.replace(pattern, "</a>");
                   pattern= /TARGET="_blank"/g;
                   str = str.replace(pattern, "rel=\"external\" ");
                   pattern = /<I>/g;
                   str = str.replace(pattern, "<em>");
                   pattern = /<\/I>/g;
                   str = str.replace(pattern, "</em>");
                   pattern = /<B>/g;
                   str = str.replace(pattern, "<strong>");
                   pattern = /<\/B>/g;
                   str = str.replace(pattern, "</strong>");
                   pattern = /<U>/g;
                   str = str.replace(pattern, "<u>");
                   pattern = /<\/U>/g;
                   str = str.replace(pattern, "</u>");
                   pattern= /<\/LI><LI>/g;
                   str = str.replace(pattern, "</li><li>");
                   pattern= /<\/LI>/g;
                   str = str.replace(pattern, "</li></ul>");
                   pattern= /<LI>/g;
                   str = str.replace(pattern, "<ul><li>");
                   pattern = /<P ALIGN="LEFT">/g;
                   str = str.replace(pattern, "<p style=\"text-align:left\" >");
                   pattern = /<P ALIGN="RIGHT">/g;
                   str = str.replace(pattern, "<p style=\"text-align:right\" >");
                   pattern = /<P ALIGN="JUSTIFY">/g;
                   str = str.replace(pattern, "<p style=\"text-align:justify\" >");
                   pattern = /<\/P>/g;
                   str = str.replace(pattern, "</p>");
                   pattern = /<\/TEXTFORMAT.*?>/g;
                   str = str.replace(pattern, "");
                   return str;
    }

    so now it’s XHTML1.1 approved.

    greets
    johan

  6. Mister
    Posted March 18, 2007 at 1:48 pm | Permalink

    Thanks Johan, that is awsome!! I cleaned up your post and put back in the HTML code :) .

  7. Aaron Fay
    Posted April 5, 2007 at 10:52 pm | Permalink

    Hey Johan,

    Your code works great, but wraps each list item in it’s own unordered list (if that’s the case). This will fix it (put it at the end). It assumes you’re not putting 2 unordered lists back to back.

    1
    2
    pattern= /<\/ul><ul>/g;
     str = str.replace(pattern, "");

    Cheers,
    Aaron

  8. Mister
    Posted April 6, 2007 at 8:19 am | Permalink

    Thanks Aaron for your contribution :)

  9. sumit
    Posted April 10, 2007 at 2:31 am | Permalink

    this code does not work on increse font size

  10. David
    Posted June 3, 2007 at 3:32 am | Permalink

    I Love you all :-)

    This one was stumping me, thanks everyone.

    Cheers David

  11. Cory
    Posted July 15, 2007 at 7:16 pm | Permalink

    Sorry for the last post , apparently this form doesnt change htmlspecialchars

    here is the fixed post

    For those those of you wondering what happened to the <FONT> tags heres the answer this pattern will replace the <FONT> tag with the <span> tag change the attribute to styles making it xhtml compliant .
    Just replace the current font Regular Expressions (patten) with these

    1
    2
    3
    4
    pattern = /<FONT FACE=\"(.*?)\" SIZE=\"(.*?)\" COLOR=\"(.*?)\" .*?>/g;
     str = str.replace(pattern, "    <span style=\"font-family: $1;font-size: $2;color: $3;\" >");
     pattern = /<\/FONT.*?>/g;
     str = str.replace(pattern, "</span>");
  12. Mister
    Posted July 26, 2007 at 7:31 am | Permalink

    Cory,

    No problem, it is hard to find a blog skin that supports html code. Thanks for you comments on this post :) .

  13. Matt
    Posted August 7, 2007 at 9:11 am | Permalink

    nice job, thx

  14. kcell
    Posted August 27, 2007 at 6:39 am | Permalink

    you all made my day … thx a lot for sharing

  15. Seth Caldwell
    Posted October 8, 2007 at 4:43 pm | Permalink

    your font fix doesn’t always work because not always are the color size and face present.
    I had to write a few more replaces to take care of that. Also, I save to database after running cleanHTML, but when I load from database I need to uncleanHTML… basically do the reverse. Otherwise it won’t recover it. However textformat was non-reversable. Luckily flash doesn’t require it be there. So why does it write it? The world may never know.

    Here’s my reverse in case you need it and want to copy paste:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    private function uncleanHTML(str:String):String
            {          
                   var pattern:RegExp = //g;
     
                   var str:String = str.replace(pattern, "");

                   pattern = //g;
     
                   str = str.replace(pattern, "");

                   pattern = //g;
     
                   str = str.replace(pattern, "");

                   pattern = //g;
     
                   str = str.replace(pattern, "");


                   pattern = //g;

                   str = str.replace(pattern, "");

                   pattern = /<a>/g;
     
                   str = str.replace(pattern, "</A>");
     
                   pattern= /rel="external" /g;
     
                   str = str.replace(pattern, "TARGET=\"_blank\"");
     
                   pattern = /<em>/g;
     
                   str = str.replace(pattern, "<I>");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "</I>");
     
                   pattern = /<strong>/g;
     
                   str = str.replace(pattern, "<B>");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "</B>");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
                   pattern= //g;
     
                   str = str.replace(pattern, "");
     
                   pattern= //g;
     
                   str = str.replace(pattern, "");
     
                   pattern= //g;
     
                   str = str.replace(pattern, "");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
                   pattern = //g;
     
                   str = str.replace(pattern, "");
     
     
                   return str;
     
              }

    Cheers =D

  16. Mister
    Posted October 9, 2007 at 8:13 am | Permalink

    Thanks for your contribution to the post. One day I should compile all the code people have contributed and roll it into a new HTML text editor for Flex.

  17. Tim
    Posted November 7, 2007 at 3:21 pm | Permalink

    Hi all, bit of a newb here. Just dropped the code in my very basic app between the mx:script tags, registered loads of errors and now whenever i make a change to the app and re-run it, the changes i have made don’t appear. It just runs the old version. Have I put the code in the right place? Sorry I know this is very basic stuff, but thanks for reading. Even better would some button code passing in the parameter to the function. Thanx again!

  18. mike
    Posted November 14, 2007 at 11:01 am | Permalink

    Hi This is prefect for a project that I am working on! But I can not get it to work. I put the function between the script tags but how do I make it run. I am new to Flex.

    Thanks

  19. Jasen
    Posted December 9, 2007 at 5:49 am | Permalink

    Would like to vote this being one of the most usefull posts of the year….ok..well maybe the month.

    Good work.

  20. Matthew
    Posted February 4, 2008 at 7:23 am | Permalink

    In my case I needed to convert back and forth between flex-HTML and XHTML. I’m using the following functions in a util file to do so.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    static public function convertFromXHtml(str:String):String
                   {
                           var pattern:RegExp;

                           pattern = /<p style="text-align:left">/g;
                           str = str.replace(pattern, "<P ALIGN=\"LEFT\">");
                           pattern = /<p style="text-align:right">/g;
                           str = str.replace(pattern, "<P ALIGN=\"RIGHT\">");
                           pattern = /<p style="text-align:justify">/g;
                           str = str.replace(pattern, "<P ALIGN=\"JUSTIFY\">");
                           pattern = /<\/p>/g;
                           str = str.replace(pattern, "</P>");

                           pattern = /<span style=\"(.*?)\">/g;
                           str = str.replace(pattern, "    <FONT $1>");
                           pattern = /color:(.*?);/g;
                           str = str.replace(pattern, "    COLOR=\"$1\" ");
                           pattern = /font-size:(.*?)px;/g;
                           str = str.replace(pattern, "SIZE=\"$1\" ");
                           pattern = /font-family:(.*?);/g;
                           str = str.replace(pattern, "FACE=\"$1\" ");
                           pattern = /text-align:(.*?);/g;
                           str = str.replace(pattern, "ALIGN=\"$1\" ");

                           pattern = /<\/span.*?>/g;
                           str = str.replace(pattern, "</FONT>");

                           pattern= /<\/li><li>/g;
                           str = str.replace(pattern, "</LI><LI>");
                           pattern= /<\/li><\/ul>/g;
                           str = str.replace(pattern, "</LI>");
                           pattern= /<ul><li>/g;
                           str = str.replace(pattern, "<LI>");

                           pattern = /<em>/g;
                           str = str.replace(pattern, "<I>");
                           pattern = /<\/em>/g;
                           str = str.replace(pattern, "</I>");
                           pattern = /<strong>/g;
                           str = str.replace(pattern, "<B>");
                           pattern = /<\/strong>/g;
                           str = str.replace(pattern, "</B>");
                           pattern = /<u>/g;
                           str = str.replace(pattern, "<U>");
                           pattern = /<\/u>/g;
                           str = str.replace(pattern, "</U>");

                           // Remove extra white space
                           pattern = /  /g;
                           str = str.replace(pattern, " ");

                           return str;
                   }

                   static public function convertToXHtml(str:String):String
                   {
                           var pattern:RegExp;

                           pattern = /<TEXTFORMAT.*?>/g;
                           str = str.replace(pattern, "");
                           pattern = /<\/TEXTFORMAT.*?>/g;
                           str = str.replace(pattern, "");

                           pattern = /<P ALIGN="LEFT">/g;
                           str = str.replace(pattern, "<p style=\"text-align:left\">");
                           pattern = /<P ALIGN="RIGHT">/g;
                           str = str.replace(pattern, "<p style=\"text-align:right\">");
                           pattern = /<P ALIGN="JUSTIFY">/g;
                           str = str.replace(pattern, "<p style=\"text-align:justify\">");
                           pattern = /<\/P>/g;
                           str = str.replace(pattern, "</p>");

                           pattern = /<FONT (.*?)>/g;
                           str = str.replace(pattern, "<span style=\"$1\">");

                           pattern = /COLOR=\"(.*?)\"/g;
                           str = str.replace(pattern, "    color:$1;");

                           pattern = /SIZE=\"(.*?)\"/g;
                           str = str.replace(pattern, "    font-size:$1px;");

                           pattern = /FACE=\"(.*?)\"/g;
                           str = str.replace(pattern, "    font-family:$1;");

                           pattern = /ALIGN=\"(.*?)\"/g;
                           str = str.replace(pattern, "    text-align:$1;");

                           pattern = /LETTERSPACING=\".*?\"/g;
                           str = str.replace(pattern, "    ");

                           pattern = /KERNING=\".*?\"/g;
                           str = str.replace(pattern, "    ");

                           pattern = /<\/FONT.*?>/g;
                           str = str.replace(pattern, "    </span>");


                           pattern= /<\/LI><LI>/g;
                           str = str.replace(pattern, "    </li><li>");
                           pattern= /<\/LI>/g;
                           str = str.replace(pattern, "    </li></ul>");
                           pattern= /<LI>/g;
                           str = str.replace(pattern, "    <ul><li>");

                           pattern = /<I>/g;
                           str = str.replace(pattern, "    <em>");
                           pattern = /<\/I>/g;
                           str = str.replace(pattern, "    </em>");
                           pattern = /<B>/g;
                           str = str.replace(pattern, "    <strong>");
                           pattern = /<\/B>/g;
                           str = str.replace(pattern, "    </strong>");
                           pattern = /<U>/g;
                           str = str.replace(pattern, "    <u>");
                           pattern = /<\/U>/g;
                           str = str.replace(pattern, "    </u>");

                           return str;
                   }
  21. Antoni Jakubiak
    Posted February 22, 2008 at 4:34 am | Permalink

    I think, You all are wrong. It’s not a good place to use regular expresion. It’s a good place to use XSLT. But we doesn’t have it.
    I sugest use XML trawerse:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    private function cleanHtml(str:String):String {
      // Create XML document
      var xml:XML = XML(""+str+"");

      // temporary
      var t1:XML;
      var t2:XML;
     
      // Remove all TEXTFORMAT
      for( t1 = xml..TEXTFORMAT[0]; t1 != null; t1 = xml..TEXTFORMAT[0] ) {
        t1.parent().replace( t1.childIndex(), t1.children() );
      }
     
      // Find all ALIGN and add STYLE
      for each ( t1 in xml..@ALIGN ) {
        t2 = t1.parent();
        t2.@STYLE = "text-align: " + t1 + "; " + t2.@STYLE;
      }
       
      // Find all FACE and add STYLE
      for each ( t1 in xml..@FACE ) {
        t2 = t1.parent();
        t2.@STYLE = "font-family: " + t1 + "; " + t2.@STYLE;
      }
     
      // Find all SIZE and add STYLE
      for each ( t1 in xml..@SIZE ) {
        t2 = t1.parent();
        t2.@STYLE = "font-size: " + t1 + "px; " + t2.@STYLE;
      }

      // Find all COLOR and add STYLE
      for each ( t1 in xml..@COLOR ) {
        t2 = t1.parent();
        t2.@STYLE = "color: " + t1 + "; " + t2.@STYLE;
      }

      return xml.children().toXMLString();
    }

    Tested in IE7, Firefox, Opera

  22. Antoni Jakubiak
    Posted February 22, 2008 at 5:59 am | Permalink

    This project:
    http://code.google.com/p/flex-richtexteditor-html-utils/

  23. Tess
    Posted April 4, 2008 at 11:27 am | Permalink

    Hi Guys, thanks for the regexp code. My problem is a little different.

    I’m trying to get a TextArea to hold more than one embedded font family, but setStyle only allows me one font family. In addition, the use of setStyle overrides all the htmltext tags.

    What I’d like to do is replace the FontFamily tags with a new value. A typical html tag is:

    This is the theme to Garry's Show,The theme to Garry's show.Garry called me up and asked if I would right his theme song.

    Now I’d like to use a regular expression to replace all the font tags with a new FontFamily. how can I write that?

  24. Roberto
    Posted April 5, 2008 at 8:25 am | Permalink

    Great code but I still have a problem.
    I pass accent characters (ò à è é) to php/mysql from the richTextEditor and I have several errors…

    What should I do?
    Roberto

  25. tomliu
    Posted April 18, 2008 at 2:30 am | Permalink
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    private function cleanHTML(str:String):String{
                   var pattern:RegExp = //g;
                   var str:String = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = /&lt;A HREF/g;
                   str = str.replace(pattern, "&lt;a href");
                   pattern = //g;
                   str = str.replace(pattern, "</a>");
                   pattern= /TARGET="_blank"/g;
                   str = str.replace(pattern, "rel=\"external\" ");
                   pattern = /<I>/g;
                   str = str.replace(pattern, "<em>");
                   pattern = //g;
                   str = str.replace(pattern, "</em>");
                   pattern = /<B>/g;
                   str = str.replace(pattern, "<strong>");
                   pattern = //g;
                   str = str.replace(pattern, "</strong>");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern= //g;
                   str = str.replace(pattern, "");
                   pattern= //g;
                   str = str.replace(pattern, "");
                   pattern= //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g
                    str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   pattern = //g;
                   str = str.replace(pattern, "");
                   return str;
                }
  26. ben
    Posted May 19, 2008 at 6:20 am | Permalink

    thx to all! this all post realy help me!!

  27. gora
    Posted June 17, 2008 at 5:30 pm | Permalink

    Yes, It is better to do it with XML.

  28. Craig Grummitt
    Posted August 24, 2008 at 7:47 pm | Permalink

    A whole lot of information seems to be stripped out of many of the posts above. For example, in the first post by Lukas Ruebbelke, he describes that:
    pattern = //g;
    should be
    pattern = //g;

    ???

    it continues in other posts, in descriptions of convertFromXHtml, for example, with reams of lines of:

    1
    2
    str = str.replace(pattern, "");
    pattern= //g;

    i’m trying to hunt down a convertFromXHtml method. Can anyone with a copy of this repost or link somewhere where it can be seen in full?

  29. Mister
    Posted August 24, 2008 at 8:18 pm | Permalink

    I checked the posts, there was some missing information. The posts all seem to be intact now, thanks for letting me know of the issue.

  30. Craig Grummitt
    Posted August 25, 2008 at 8:16 pm | Permalink

    beautiful thanks for that mister you’re a life saver

  31. Nolen
    Posted August 27, 2008 at 2:04 pm | Permalink

    Thank you so much for this snippet.

    I was pulling my hair out trying to determine what was going on with my text.

  32. Luc Martin
    Posted December 14, 2008 at 12:06 pm | Permalink

    This version will maintain the formatting (styles)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    private function cleanHTML(str:String):String
            {
                var newStr:String;
                var pattern:RegExp = //g;
                var str:String = str.replace(pattern, "");
       
                pattern = /ALIGN="/g;              
                var str:String = str.replace(pattern, 'style="     text-align: ');
       
       
                pattern = /"&gt;&lt;FONT\sFACE?="/g;              
                str = str.replace(pattern, '    ; font-family: ');
       
                pattern = /"\sSIZE?="/g;
                str = str.replace(pattern, '    ; font-size: ');
       
                pattern = /"\sCOLOR="/g;
                str = str.replace(pattern, '    px; color: ');
               
       
                pattern = /&lt;FONT\sFACE?="/g;
                newStr = str.replace(pattern, '    ; font-familly: ');
                var replaced:Boolean = true;  
               
                do{            
                    replaced = false;
                    if(newStr != str)     //This is if there more occurence of FACE
                    {
                        str = str.replace(pattern, '    &lt;span style=" font-size: '); //REPLACE SIZE AND ADD STYLE
                           
                            pattern = /"    \sCOLOR="/g;
                            str = str.replace(pattern, '; color: '); // REPLACE COLOR
                            replaced = true;
                           
                        }
                        else  //No FACE NO SIZE
                        {
                            pattern = /&lt;span style="     color: '); // REPLACE COLOR
                            replaced = true;
                        }
                           
                      }
                }while(replaced == false)
                 
                   
                pattern = /"\sLETTERSPACING="\d+" KERNING="\d+"/g;              
                str = str.replace(pattern, '    ;" ');
                   
                pattern = //g;
                str = str.replace(pattern, "    ");
                pattern = /&lt;A HREF/g;
                str = str.replace(pattern, "    &lt;a href");
                pattern = //g;
                str = str.replace(pattern, "    </a>");
                  // pattern= /TARGET="    _blank"/g;
                  // str = str.replace(pattern, "    rel=\"external\" ");
                   pattern = /<I>/g;
                str = str.replace(pattern, "<em>");
                pattern = //g;
                str = str.replace(pattern, "</em>");
                pattern = /<B>/g;
                str = str.replace(pattern, "<strong>");
                pattern = //g;
                str = str.replace(pattern, "</strong>");
                pattern = //g;
                str = str.replace(pattern, "");
                pattern = //g;
                str = str.replace(pattern, "");
                pattern= //g;
                str = str.replace(pattern, "");
                pattern= //g;
                str = str.replace(pattern, "");
                pattern= //g;
                str = str.replace(pattern, "");
                pattern = /LEFT/g;
                str = str.replace(pattern, "left");
                pattern = /RIGHT/g;
                str = str.replace(pattern, "right");
                pattern = /JUSTIFY/g;
                   str = str.replace(pattern, "justify");
                pattern = /&lt;p/g;
                str = str.replace(pattern, "&lt;span ");
                pattern = //g;
                str = str.replace(pattern, "");
                pattern = /&lt;P/g;
                str = str.replace(pattern, "&lt;span ");
                pattern = //g;
                str = str.replace(pattern, "");
                pattern = //g;
                str = str.replace(pattern, "");
                return str;
            }
  33. Luc Martin
    Posted December 14, 2008 at 12:10 pm | Permalink

    Sorry the blog has stripped my comment

  34. Mister
    Posted December 17, 2008 at 4:04 pm | Permalink

    @ Luc, be sure to use the code tags for posting code in comments, thanks!

  35. Shawn
    Posted January 5, 2009 at 9:36 am | Permalink

    anyone know how to replace or reformat the img tag tried this

    pattern = /<IMG/gi;
    str = str.replace(pattern, “/gi;
    str = str.replace(pattern, “src=$1/>”);

    Thanks

  36. Shawn
    Posted January 5, 2009 at 9:37 am | Permalink

    sorry

    1
    2
    3
    pattern = /&lt;IMG/gi;
    str = str.replace(pattern, "/gi;
    str = str.replace(pattern, "    src=$1/&gt;");
  37. unhitched
    Posted January 20, 2009 at 4:04 am | Permalink

    thanks guys! I had/have a problem with bullets not appearing with (any) embedded font in a Flex app. I took this code & added:

    pattern = //gi;
    str = str.replace(pattern, “”);

    as a (nasty) workaround.

    Damn handy being able to style RichTextEditor output with css too.

    Cheers!

  38. Allen G.
    Posted March 23, 2009 at 11:45 am | Permalink

    Thanks!

  39. Gerard Burnside
    Posted April 2, 2009 at 6:33 am | Permalink

    In case you prefer to convert the HTML only at time of publish (in an application server), here’s Matthew’s code ported in Java – that should save you the 5 minutes it took me to do it ;-) :

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
        public static String convertFlashToXHtml(String str)
        {
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("COLOR=\"(.*?)\"", "color:$1;");
                str = str.replaceAll("SIZE=\"(.*?)\"", "font-size:$1px;");
                str = str.replaceAll("FACE=\"(.*?)\"", "font-family:$1;");
                str = str.replaceAll("ALIGN=\"(.*?)\"", "text-align:$1;");
                str = str.replaceAll("LETTERSPACING=\".*?\"", "");
                str = str.replaceAll("KERNING=\".*?\"", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("", "");
                str = str.replaceAll("<I>", "<em>");
                str = str.replaceAll("</I>", "</em>");
                str = str.replaceAll("<B>", "<strong>");
                str = str.replaceAll("</B>", "</strong>");
                str = str.replaceAll("", "");
                return str.replaceAll("", "");
        }
  40. James
    Posted April 29, 2009 at 10:59 am | Permalink

    Damn!! Didn’t see the formatting tags. Hope this is the good one:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /** Convert a flex/flash html string to the official html standard, removing custom flex tags. */
        function convertFlexHtmlToStandard($string){
           
            // Replace all textformat starting tags. Note that we replace "" by ""
            $result = ereg_replace("]*&gt;", "", $string);

            // Replace all ending textformat ending tags
            $result = ereg_replace("", "", $result);
           
            // Replace all size="XXXX" by the style='XXXXpx' expression
            $result = ereg_replace('SIZE="([^"]*)"', "style='font-size:\\1px;'", $result);

            return $result;
           
        }
  41. Mister
    Posted April 29, 2009 at 11:01 am | Permalink

    @James,

    Thanks for the contribution, this is by far my most commented post, I deleted the bad formatted version. I have to make those formatting comments more noticeable one day :) .

  42. Daniel Burke
    Posted June 25, 2009 at 11:46 am | Permalink

    I’m trying to insert a block of code into this manually to test it and the lack of escape characters is, of course, throwing an error. The problem is, my whole use for this script you guys have written (thank you a million times by the way) will be to insert escape characters before any and all single and double quotation marks. Quite the paradoxical quandry that I am having trouble finding my way out of.

    The purpose is to add the escape charaters, then send the edited string to a php file, which would throw an error without the escape characters. Any thoughts?

  43. Keith Lee
    Posted September 30, 2009 at 11:34 am | Permalink

    Great information! If Adobe doesn’t have plans to upgrade the RTE, they should definitely do so. This information is a great help in the interim.

  44. Nicolas
    Posted March 3, 2010 at 7:39 pm | Permalink

    Antoni Jakubiak

    Mate! I owe you a drink I swear.

    Thanks

9 Trackbacks

  1. By CustomRichTextEditor with XHTML text | Axelology on March 24, 2008 at 8:03 am

    [...] Thanksmister.com’s post that had a humongous help with the regex’s [...]

  2. By Custom RichTextEditor — Thanks, Mister! on April 24, 2008 at 4:18 pm

    [...] of the longest running posts on my blog has been about creating XHTML output from the Flex RichTextEditor control. I always comment how it [...]

  3. By Igor Costa » Blog Archive » #6 Flex Hack - RichTextEditor to output XHTML 1.1 valid on January 12, 2009 at 9:12 am

    [...] Research found at:http://thanksmister.com/?p=17=4 [...]

  4. By Flex Tips - Obtenir un texte HTML valide ? partir du RichTextEditor (htmlText) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3 on May 8, 2009 at 5:35 am

    [...] utilisable pour une intégration dans du HTML. Certains ce sont posé la question, sur le blog Thanks Mister. La solution se trouve dans les Expressions Régulières AS3. Avant de passer aux choses [...]

  5. By Using Adobe Flex RichTextEditor for CMS « Zero Credibility on September 17, 2009 at 11:52 am

    [...] The fix: You just need to get the bad gunk out of your HTML-containing string variable before sending it to your database. The function pasted below addresses the issues I have mentioned, and you can find many more versions at Thanks Mister. [...]

  6. By Fixing HTML from Adobe Flex’s RichTextEditor « Zero Credibility on September 17, 2009 at 11:54 am

    [...] Fixing HTML from Adobe Flex’s RichTextEditor September 17, 2008 Leave a comment Go to comments After my last post regarding using the RichTextEditor for CMS, I realized the extent to which the HTML coming out of the RTE sucked ass. Again, based on the awful and obsolete HTML provided by the RTE, I honestly can’t imagine what Adobe was thinking. What good can this thing be used for? An example of what it spits out from Thanks Mister: [...]

  7. By Using Adobe Flex RichTextEditor for CMS « Keith Collins on October 6, 2009 at 2:13 pm

    [...] The fix: You just need to get the bad gunk out of your HTML-containing string variable before sending it to your database. The function pasted below addresses the issues I have mentioned, and you can find many more versions at Thanks Mister. [...]

  8. By Tweets that mention Flex: Export valid HTML from the RichTextEditor -- Topsy.com on April 28, 2010 at 1:58 am

    [...] This post was mentioned on Twitter by Dennis Plucinik. Dennis Plucinik said: Reading: Flex: Export valid HTML from the RichTextEditor: http://bit.ly/aF115g [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use [as]...[/as] to post ActionScript code in your comments. Example code in comment: [as] public var myvar:String = "Hello"; [/as]