Simple solution to a complex problem – customized Rich Text Editor

Apparently, creating customized RichTextEditor component in flex was looking time consuming. The rich APIs that flex provides made this task easier.

I retrieved reference of different styling controls from a hidden richTextEditor object, arranged them as per my requirement, and its done!

I thought to make a custom editor with customized control positions is a big task, but is not what I thought! 🙂

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute" creationComplete="init()">
			import mx.controls.Button;
			import mx.controls.TextArea;
			import mx.controls.TextInput;
			import mx.controls.RichTextEditor;

			private function init():void
				var textInput:TextInput = rte.linkTextInput;
				textInput.visible = false;

				var bulletsButton:Button = rte.bulletButton;
				bulletsButton.visible = false;

				var fontFamily:DisplayObject = rte.fontFamilyCombo;
				var fontSize:DisplayObject = rte.fontSizeCombo;

				var alignBtns:DisplayObject = rte.alignButtons;

				var boldBtn:DisplayObject = rte.boldButton;
				var italicBtn:DisplayObject = rte.italicButton;
				var underlineBtn:DisplayObject = rte.underlineButton;
				var colorPicker:DisplayObject = rte.colorPicker;
				var styles:HBox = new HBox();

				var textArea:TextArea = rte.textArea;
	<mx:VBox id="controls" width="250" height="100">
		<mx:HBox id="font" />
		<mx:HBox id="effects" />
	<mx:Panel id="editor1" x="300" width="300" height="300"/>
	<mx:RichTextEditor id="rte" visible="false" />
  1. great! this is what I looked-for. thanks for sharing 🙂

  2. oh btw i just have figure it out that the ColorPicker is not function as it should. It just show the color without pop-up. Any idea why is that?

  3. @shabith
    You need to either click on color picker, or use open method to show/open color picker!

Leave a Comment

NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: