How to set the a background image of a RichTextEditor in Flex 4

I have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text c开发者_如何学Pythonontrol in flex as easy as possible? Thanks

.rte{
        ...
        backgroundImage: "assets/globe.jpg";
    }

and

<mx:RichTextEditor id="rt" 
                   ...
                   styleName="rte"
                   />

Unfortunately, you can't.

The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.

Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:

<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
    <mx:Image  width="100%" height="100%" />
    <RichTextEditor />
</Canvas>

The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.

That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.

EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.

It can be done by setting RTE TextArea's backgroundAlpha to 0

 <mx:RichTextEditor id="richTextEditor" 
        backgroundImage="@Embed('<imagepath>')" width="100%" height="100%"

        initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
        />

Note:Please modify image path and you can also set style through CSS/Style tag

Hopefully this will helps