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]
Hi Terence,
Lets start with your folder structure, you should have:
src (folder)
|
|_ custom (folder)
| |_ CustomRichTextEditor.as
|
|_ CustomRichTextEditor.mxml
where CustomRichTextEditor.as consists of the code in my example, or in your case its the custom.as file. The code above seems to come out kinda funky in IE7, try using Firefox to make sure it looks correct. Lets test it out! Use the following code:
CustomRichTextEditor.mxml
I created actionscript functions to get and set the code, and on the change method of both they grab the text from each other… So when the CustomRichTextEditor changes it updates the TextArea and vice versa. Let me know if that helps.
[...] de votre application pour transformer votre texte à la volée. Certains ont même vu plus loin et ont crée un composant personnalisé basé sur le RichTextEditor auquel ils ont rajouté une propriété "xhtml" qui va prendre le"htmlText" et [...]
Je suis désolé que monsieur aimable, mon Français soit pauvre. Est-ce que quoi je peux lire, je dira vous remercient ? Merci pour la lecture.
Hi,
I did the same as you said. Copying the mxml and as files and storing the as file in custom folder.
As a output i get two textboxes and nothing happens if u type in it.
There is no RichTextEditor created.
Whats wrong with my program. Please tell. Thx for your timely support.
Satish
Start from the begining… create a new flex app. In your “src” folder, create a new folder called “custom”. Copy and Paste this file into your “custom” folder… http://joshkrajnak.com/wp-content/uploads/CRTE/CustomRichTextEditor.as then you need to basically use that component in your main.mxml or whatever you called yours. Let me know if this helps buddy.