Convert html on RichTextEditor

11 03 2009

Original on thanksmister.com

I. Use XML to convert html ricktexteditor to xhtml.

         private function richTextEditorToHtml(str:String):String {
                // Create XML document
                var xml:XML = XML("<BODY>"+str+"</BODY>");

                // 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
                for each ( t1 in xml..@ALIGN ) {
                    t2 = t1.parent();
                    t2.@STYLE = "text-align: " + t1 + "; " + t2.@STYLE;
                    delete t2.@ALIGN;
                }

                // Find all FACE
                for each ( t1 in xml..@FACE ) {
                    t2 = t1.parent();
                    t2.@STYLE = "font-family: " + t1 + "; " + t2.@STYLE;
                    delete t2.@FACE;
                }

                // Find all SIZE
                for each ( t1 in xml..@SIZE ) {
                    t2 = t1.parent();
                    t2.@STYLE = "font-size: " + t1 + "px; " + t2.@STYLE;
                    delete t2.@SIZE;
                }

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

                // Find all LETTERSPACING
                for each ( t1 in xml..@LETTERSPACING ) {
                    t2 = t1.parent();
                    t2.@STYLE = "letter-spacing: " + t1 + "px; " + t2.@STYLE;
                    delete t2.@LETTERSPACING;
                }

                // Find all KERNING
                for each ( t1 in xml..@KERNING ) {
                    t2 = t1.parent();
                    // ? css
                    delete t2.@KERNING;
                }

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

II. Use RegExp convert between flex-html and xhtml

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

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

Comments : Leave a Comment »
Tags: , ,
Categories : AIR, Flex, Flex & AIR