Flex Examples
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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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).
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