Question

How can I get the RichEditableText control to display the text in pages. Just like in Microsoft Word, it should have visual pagebreaks which are determined by a page-size setting so that, I can switch to A4, US Letter size, etc and the text will flow into vertical rectangles (pages) accordingly.

I sense I should use the Text Layout Framework, TextFlow actually.
But what is the starting point and what should I focus on, in order to get this paper layout.

Any help is appreciated.

Answer 1

You can’t do it with the default RichEditableText component, but here’s a little snippet that should get you started:

<s:VGroup gap="20">
    <mx:UIComponent id="page1" width="50" height="50" />
    <mx:UIComponent id="page2" width="50" height="50" />
</s:VGroup>

Replace the sizes with your A4 or other sizes. If you want the number of pages to be dynamic, you’ll have to use a DataGroup instead.

Now we create one TextFlow object, we assign it one ContainerController per page, and we have it lay out the text over our pages:

var tlf:TextFlow = TextFlowUtil.importFromString(
    "Some very long text that spans many pages goes in here."
);
for each (var page:Sprite in [page1, page2]) {
    var c:ContainerController = new ContainerController(
        page, page.width, page.height
    );
    tlf.flowComposer.addController(c);
}
tlf.flowComposer.updateAllControllers();