The generic Rich Text Editor that came with Flex 3 works, and it works well… But it also produces extra html that we dont need. Igor Costa provided methods that clean up the html in his blog post, I’m simply taking those methods and adding getters and setters so that we can use the component in multiple places without having to re-paste his code everywhere. Once the CustomRichTextEditor is in place, set “xhtml=’foo’ ” where “foo” will have the clean html. Enjoy, Reuse, Share.
Click the image for the demo.
Click To See Code
[sourcecode language='jscript']
package custom
{
import mx.controls.RichTextEditor;
public class CustomRichTextEditor extends RichTextEditor
{
public function CustomRichTextEditor()
{
super()
}
public function get xhtml():String {
return convertToXHtml(this.htmlText);
}
public function set xhtml(val:String):void {
this.htmlText = convertFromXHtml(val);
}
public static function convertFromXHtml(str:String):String {
var pattern:RegExp;
pattern = /
/g;
str = str.replace(pattern, “
“);
pattern = /
/g;
str = str.replace(pattern, “
“);
pattern = /
/g;
str = str.replace(pattern, “
“);
pattern = /<\/p>/g;
str = str.replace(pattern, “
“);
pattern = /
/g;
str = str.replace(pattern, ““);
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, ““);
pattern= /<\/li>
/g;
str = str.replace(pattern, ““);
pattern= /<\/li><\/ul>/g;
str = str.replace(pattern, ““);
pattern= /
- /g;
str = str.replace(pattern, “ - “);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/em>/g;
str = str.replace(pattern, ““);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/strong>/g;
str = str.replace(pattern, ““);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/u>/g;
str = str.replace(pattern, ““);
// Remove extra white space
pattern = / /g;
str = str.replace(pattern, ” “);
return str;
}
public static function convertToXHtml(str:String):String{
var pattern:RegExp;
pattern = //g;
str = str.replace(pattern, “”);
pattern = /<\/TEXTFORMAT.*?>/g;
str = str.replace(pattern, “”);
pattern = //g;
str = str.replace(pattern, “
“);
pattern = /
/g;
str = str.replace(pattern, “
“);
pattern = /
/g;
str = str.replace(pattern, “
“);
pattern = /<\/P>/g;
str = str.replace(pattern, “”);
pattern = //g;
str = str.replace(pattern, ““);
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, ““);
pattern= /<\/LI>- /g;
str = str.replace(pattern, “
- “);
pattern= /<\/LI>/g;
str = str.replace(pattern, “
“);
pattern= /
/g;
str = str.replace(pattern, “
- “);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/I>/g;
str = str.replace(pattern, ““);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/B>/g;
str = str.replace(pattern, ““);
pattern = //g;
str = str.replace(pattern, ““);
pattern = /<\/U>/g;
str = str.replace(pattern, ““);
return str;
}
}
}
[/sourcecode]
