Harit, in his own thoughts…

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="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<!&#91;CDATA&#91;
			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;
				font.addChild(fontFamily);
				var fontSize:DisplayObject = rte.fontSizeCombo;
				font.addChild(fontSize);

				var alignBtns:DisplayObject = rte.alignButtons;
				effects.addChild(alignBtns);

				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();
				styles.addChild(boldBtn);
				styles.addChild(italicBtn);
				styles.addChild(underlineBtn);
				styles.addChild(colorPicker);
				effects.addChild(styles);

				var textArea:TextArea = rte.textArea;
				editor1.addChild(textArea);
			}
		&#93;&#93;>
	</mx:Script>
	<mx:VBox id="controls" width="250" height="100">
		<mx:HBox id="font" />
		<mx:HBox id="effects" />
	</mx:VBox>
	<mx:Panel id="editor1" x="300" width="300" height="300"/>
	<mx:RichTextEditor id="rte" visible="false" />
</mx:Application>