CODEWITHSUNDEEP
apache-flex
gabi
gabi

Reputation: 15

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 control in flex as easy as possible? Thanks

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

and

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

Upvotes: 1

Views: 1321

Answers (3)

Imran
Imran

Reputation: 3024

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

Upvotes: 0

J_A_X
J_A_X

Reputation: 12847

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.

Upvotes: 0

Marty Pitt
Marty Pitt

Reputation: 29290

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>

Upvotes: 2

Related Questions