RichTextEditor with Multiple Target TextAreas in Flex 3 and AS3

Posted on 2009-05-18
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.
Question by:20lbMonkey
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 10

Expert Comment

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?

Author Comment

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();
_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);
// = 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

LVL 10

Accepted Solution

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="" creationComplete="init();">
			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;
				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: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"/>

Open in new window

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.


Author Comment

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.
LVL 10

Expert Comment

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.

Author Closing Comment

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!

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

687 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