Возможно ли выбрать текст между несколькими объектами RichEditableText во Flex?

Question

Например, скажем, у меня есть 3 объекта RichEditableText, и я хочу иметь возможность выделить их все вместе:

<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" />

Можно ли вообще сделать так, чтобы все три можно было выделить таким образом, чтобы кто-то мог скопировать все три сразу, а затем где-нибудь пропустить весь текст?

Спасибо!

edit: я должен уточнить, причина, по которой они будут такими, заключается в том, что они находятся в itemRenderer, поэтому каждый из них будет своим собственным объектом в каждой строке списка. Хотя было бы неплохо, если бы текст можно было выделить и скопировать так, как если бы он был все вместе.

Только представьте, как конечный пользователь может перетаскивать выделение любого другого текста в стандартном HTML-документе для вставки в другое место.

Answer 1

Благодаря Text Layout Framework теперь вы можете делать практически все, что захотите, с текстом.Но иногда это может быть сложно реализовать.

У меня есть два решения для вас.В зависимости от того, какой уровень управления вам требуется, есть простой и сложный.

Простой способ

В большинстве случаев это решение подойдет хорошо.Я предполагаю, что вы хотите отображать эти тексты в виде абзацев.В этом случае вы можете просто использовать один RichEditableText и использовать свойство textFlow вместо text, например:

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>"
);

Вот и все.Я использовал стиль paragraphSpaceAfter, чтобы добавить интервал между абзацами.Вы также можете добавить стили к любому конкретному абзацу, чтобы дать вам еще более детальный контроль над их позиционированием.

Трудный путь

Если вам действительно нужен очень специфический контроль(например, если три текстовых поля должны находиться в трех совершенно отдельных местах), вы можете сделать это следующим образом:

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();

Как вы можете видеть, я не использовал RichEditableText для этого, так как он уже использует свой собственный flowcomposer и взаимодействующий менеджер, который будет конфликтовать с теми, которые я назначаю.Теперь вы можете позиционировать и изменять размеры трех контейнеров по своему усмотрению.

Но помните: большинство вариантов использования могут быть решены с помощью простого стилевого решения.(MXML, который я использовал здесь в качестве примера, на самом деле прост, чтобы оправдать этот подход, но мне пришлось передать идею простым способом)

Answer 2

Просто добавьте стиль с фоновым цветом к вашему RichEditableText. И сохраните данные от каждого компонента в объекте ArrayCollection. Вы можете получить его, когда вам это нужно.

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