Solved

RichTextEditor with Multiple Target TextAreas in Flex 3 and AS3

Posted on 2009-05-18
6
2,641 Views
Last Modified: 2013-11-11
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.
0
Comment
Question by:20lbMonkey
  • 3
  • 3
6 Comments
 
LVL 10

Expert Comment

by:mplord
ID: 24416858
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?
0
 

Author Comment

by:20lbMonkey
ID: 24417662
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

0
 
LVL 10

Accepted Solution

by:
mplord earned 500 total points
ID: 24420453
The following example dynamically creates the RTE in AS rather than MXML - the key to this was letting the RTE control complete it's initialisation, then you can work with it's sub controls after it's creationComplete event has fired.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application	xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
 

	<mx:Script>

		<![CDATA[

			import mx.events.FlexEvent;

			import mx.controls.RichTextEditor;

			import mx.controls.TextArea;

			import mx.core.Application;
 

			private var rte:RichTextEditor;
 

			private function init():void

			{

				rte = new RichTextEditor();

				rte.title = "Title";

				rte.visible = false;

				rte.includeInLayout = false;

				canvas.addChild(rte);

				rte.addEventListener(FlexEvent.CREATION_COMPLETE, rteinit, false, 0, true);				

			}
 

			private function rteinit(event:Event):void

			{

				var textArea:DisplayObject = canvas.addChild(rte.textArea);

				var toolbar:DisplayObject = canvas2.addChild(rte.toolbar);

				var toolBar2:DisplayObject = canvas2.addChild(rte.toolBar2);

				

				textArea.width = 200; textArea.height = 200;

				textArea.x = 10; textArea.y = 10;

				toolbar.width = 200; toolbar.height = 50;

				toolbar.x = 10; toolbar.y = 10;

				toolBar2.width = 200; toolBar2.height = 50;

				toolBar2.x = 10; toolBar2.y = 200;

			}

		]]>

	</mx:Script>

	<mx:HBox width="100%" height="100%">

		<mx:Canvas id="canvas" width="100%" height="100%" cornerRadius="5" borderStyle="solid"/>

		<mx:Canvas id="canvas2" width="100%" height="100%" cornerRadius="5" borderStyle="solid"/>

	</mx:HBox>
 

</mx:Application> 

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:20lbMonkey
ID: 24429001
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.
0
 
LVL 10

Expert Comment

by:mplord
ID: 24430510
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.
0
 

Author Closing Comment

by:20lbMonkey
ID: 31582730
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!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now