asked on

RichTextEditor with Multiple Target TextAreas in Flex 3 and AS3

I have been reading a lot about use of the rich text editor. This is sort of a black box as there really isnt much written about it. I have found a few useful blogs, but I want to make it more dynamic in my code.

I am working on a project for a friend and I may be trying to over-engineer this based on my past experience as a .Net Developer (please dont boo me, I am really starting to like FLEX).

Here is the scenario I want to try and tackle:

I am looping through AS3 and creating TextAreas on a screen based on configuration data that is being returned from a web service. I am able to create the text areas just fine. I am wondering if I can also dynamically create an instance of the RichTextEditor ToolBar for every TextArea that will be attached to these TextAreas dynamically and not be visually connected to the TextAreas on the screen. I would just like them over to the side of the TextAreas.

I tried creating just one RTE and tried linking it to multiple text areas based on addEventListener, but it hasnt turned out very well.

mplord

I'm not clear how you want this set up - one, or multiple RTE's? One RTE connected to multiple TextAreas? or several RTE's connected to several TextAreas?

Do you want editing in the RTE to be reflected in one or more TextAreas?

20lbMonkey

ASKER

I am trying to do it as 1 rtf per text area. This way i can add and subtract subcontrols as the requirements change.

I have included the code that I have been playing with. This is inside of a for loop and the count is only 1 just so I can try and create one instance. I was hoping but getting one up and running that i would be able to hack my way through the dynamic creation of the rest of them.

I have no problem creating the richtexteditor when its instantiated in MXML, but there is obviously more of a trick to it when its instantiated in AS3. Adding and subtracting subcontrols are not a problem when doing it this way either.

I really appreciate any help you can offer.

var _rte1:RichTextEditor = new RichTextEditor();
addChild(_rte1);
_rte1.title = prodPageEditArray[k].productvariableid;
_rte1.includeInLayout = false;
_rte1.visible = false;
                               		
var _text1:DisplayObject = _canvas.addChild(_rte1.textArea);
var toolbar:DisplayObject = _canvas.addChild(toolbar);  --- throws this error ReferenceError: Error #1069: Property fontFamilyCombo not found on this site and there is no default value.
var toolBar2:DisplayObject = _canvas.addChild(_rte1.toolBar2);
 
//_text1.id = prodPageEditArray[k].productvariableid; - doesnt like this
//_text1.editable = prodPageEditArray[k].editable; - doesnt like this
_text1.width = prodPageEditArray[k].width;
_text1.height = prodPageEditArray[k].height;
_text1.x = prodPageEditArray[k].xcoord;
_text1.y = prodPageEditArray[k].ycoord;
//_text1.enabled = "true"; doesnt like this

Open in new window

ASKER CERTIFIED SOLUTION

mplord

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

20lbMonkey

ASKER

Thank you so much. I was able to get this to work successfully. It actually helped me to connect the dots on a few other issues I was have trouble with.

I will accept this solution and reward you with the points. But, you have me curious as to how to use one version of RTE to connect with many Text Areas.

I have been playing with this quite a bit and am having no luck. I am assuming that you need to use a onclick event to dispatch an event and reset the focus of the Text Editor?

Just let me know if I should be closing this out and opening a new question as I am still new to all of this.

Again, thanks for you help!

This site rocks.

mplord

Well, firstly the RTE has it's own TextArea, which is going to be tightly bound to the edit controls from a data perspective. So I guess we can't tell the RTE to use a different Text Area, probably instead you'd have to pull off some trickery to hide a TextArea (A) and reposition the RTE TextArea over the top to make it look like its TextArea (A) you're working with. Then make sure when you move to another TextArea (B) and pull off the same trick, the data from the RTE TextArea gets placed into the TextArea (A) you're leaving behind, and the data in the RTE TextArea gets populated with that from the TextArea (B) you're moving to.

If however, you want a single RTE TextArea in one place on the screen, and make what you edit in that reflect in any other TextArea (A or B) then you can probably play around with dynamically binding data using BindingUtils to bind property 'htmlText' to whichever TextArea (A or B) you want the RTE TextArea to be mirrored to at any particular time.

20lbMonkey

ASKER

Thanks for your help. Again, this helped me in other areas I was having trouble with as well. I hope you are around the next time I have a beginners question!