Possible to select text between multiple RichEditableText objects in Flex?

For example, say I have 3 RichEditableText objects and I want to be able to highlig开发者_如何学Cht them all together:

<s:RichEditableText id="obj_one" width="100%" text="Click and start dragging the highlight here..." selectable="true" editable="false" fontSize="9" />
<s:RichEditableText id="obj_two" width="100%" text="Continue dragging the highlight through this one" selectable="true" editable="false" fontSize="9" />
<s:RichEditableText id="obj_three" width="100%" text="and keep going and finish highlighting them all right here" selectable="true" editable="false" fontSize="9" />

Is it even possible to make it so all three could be highlighted that way someone could Copy all three at once then past all the text somewhere?

Thanks!

edit: I should clarify, The reason they would be like this is because there they are in an itemRenderer so they would each be their own object in each line on the list. It would be nice though if the text could be highlighted and copied like it was all together though.

Just imagine the way an end user would expect to be able to drag an highlight any other text in a standard html document to paste elsewhere.

Thanks to the Text Layout Framework you can do pretty much whatever you want with text now. But sometimes it can be daunting to implement.

I have two solutions for you. Depending on what level of control you require there's an easy one and a hard one.

The easy way

For most uses cases this solution should do fine. I'm assuming that you want to display those texts in a paragraph-like fashion. In that case you can just use one RichEditableText and use the textFlow property instead of text, like this:

MXML

<s:RichEditableText id="textBox" top="100" paragraphSpaceAfter="15" />

AS

textBox.textFlow = TextFlowUtil.importFromString(
    "<p>Click and start dragging the highlight here...</p>" +
    "<p>Continue dragging the highlight through this one</p>" +
    "<p>and keep going and finish highlighting them all right here</p>"
);

That's it. I used paragraphSpaceAfter styling to add some spacing between the paragraphs. You can also add styling to any specific paragraph to give you even more granular control over their positioning.

The hard way

If you really have need for very specific control (for instance if the three textboxes would have to be in three completely discrete places) then you can do it like this:

MXML

<mx:UIComponent id="obj_one" left="0" top="0" width="300" height="20"/>
<mx:UIComponent id="obj_two" left="50" top="30" width="300" height="20" />
<mx:UIComponent id="obj_three" left="100" top="60" width="200" height="40" />

AS

//create the TextFlow object
var text:TextFlow = TextFlowUtil.importFromString(
    "<p>Click and start dragging the highlight here...</p>" +
    "<p>Continue dragging the highlight through this one</p>" + 
    "<p>and keep going and finish highlighting them all right here</p>"
);
//make the text selectable
text.interactionManager = new SelectionManager();

//make all three of the area's control the same TextFlow object
text.flowComposer.addController(
    new ContainerController(obj_one, obj_one.width, obj_one.height));
text.flowComposer.addController(
    new ContainerController(obj_two, obj_two.width, obj_two.height));
text.flowComposer.addController(
    new ContainerController(obj_three, obj_three.width, obj_three.height));

//once the 3 controllers are assigned, recalculate the composition
text.flowComposer.updateAllControllers();

As you can see, I did not use RichEditableText for this, since it already uses a flowcomposer and interactionmanager of its own that would conflict with the ones I'm assigning. Now you can position and resize the three containers as you see fit.

But remember: most use cases can be solved with some styling on the easy solution. (The MXML I used as an example here is actually to simple to justify this approach, but I had to convey the idea in an easy way)

Just put a style with a backgroundcolor to your RichEditableText. And save the data from each component in a ArrayCollection Object. You can get it when you need it.

var mydata:ArrayCollection = new ArrayCollection();
mydata.addItem({value:obj_one.text}); 
mydata.addItem({value:obj_two.text}); 
mydata.addItem({value:obj_three.text});
OtherTextarea.text = mydata.getItemAt(0).value + " " .... etc