Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
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.

609 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