RichTextEditor with Multiple Target TextAreas in Flex 3 and AS3

Posted on 2009-05-18
Medium Priority
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);
//_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

LVL 10

Accepted Solution

mplord earned 2000 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();">
			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;
				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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

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 …
I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
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…
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.
Suggested Courses

777 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