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> <![CDATA[ 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); } ]]> </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>
great! this is what I looked-for. thanks for sharing 🙂
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?
@shabith
You need to either click on color picker, or use open method to show/open color picker!