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>
{ 4 comments… read them below or add one }
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
htmlTextproperty after calling thesetStyle()method:private function btn_click(evt:ColorPickerEvent):void { var formattedText:String = richTextEditor.htmlText; richTextEditor.textArea.setStyle("backgroundColor", evt.color); // Workaround... richTextEditor.htmlText = formattedText; }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).
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.