The following example shows how you can set the background color of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundColor
style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ --> <mx:Application name="RichTextEditor_backgroundColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; private function colorPicker_change(evt:ColorPickerEvent):void { richTextEditor.textArea.setStyle("backgroundColor", evt.color); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="backgroundColor:"> <mx:ColorPicker id="colorPicker" selectedColor="0xFFFFFF" change="colorPicker_change(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:RichTextEditor id="richTextEditor" /> </mx:Application>
View source is enabled in the following example.
You can also set the nested TextArea control’s background color in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-color-of-the-richtexteditor-text-area-in-flex/ --> <mx:Application name="RichTextEditor_backgroundColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> RichTextEditor { textAreaStyleName: rteTextAreaStyles; } .rteTextAreaStyles { backgroundColor: haloSilver; } </mx:Style> <mx:RichTextEditor id="richTextEditor" /> </mx:Application>
I found that it works incorrect. Try to set some text style like color, size etc and change background color. It jumps to default values.
Alexander,
Good catch! I filed this in the Flex bug base as https://bugs.adobe.com/jira/browse/SDK-19453 and attached a workaround.
Basically, you’ll need to re-set the
htmlText
property after calling thesetStyle()
method:Peter
How to set background color for some selected lines on a Rich Text Area. Say if you have 10 lines of text, you want to highlight only 3 lines (line 2,3,4) only, how do you do that? Please note that I would like to high light the whole back ground for entire line (not just text alone).
Hi Gan, I have the same problem. I want to render say 4 lines of which say:
Line 1 should be red font with green background color.
Line 2 is default black font
Line 3 is blue font with green background color.
Line 4 is default black font
I’ve banged my head around. Looked for solution almost everywhere to no avail.
Did you find any solution?
Regards,
Rahul
I ‘m working on a website which used the RechTextEditor, can you tell me how i can make the default text color #cccccc but don’t change the title color.Thank you very much.
i want create a table on rich text editor using flex where i can get the source code for that