Wysiwyg editors: few ediotors in chain and editor height limit

Question

I have to questions about javascript wysiwyg editors.

1. I need to link few wysiwyg editors in chain.

I mean that in some moment (characters or height limit) cursor should jump to next editor. And if next editor is already filled - cursor should jump (focus) before first symbol. And same if user delete text. Something like Aloha editor demo for column layout. But I can not use this because editors in chain could have different position in different layouts. For example:

2. How can I set editor height limit? For example when editor height reach certain value - user could not add more text but could delete? I have already implement this but there is one big problem:

Editor height limit is reached but user still be able to add text to any line in the list (marked with arrow)

This is no matter for me which wysiwyg editor will be used (TinyMCE, Alloha, CKEDITOR) but it should be able to implement all that I described above.

Answer 1

That's a lot to tackle. There's no one editor that will do all of that (especially the PDF generation). There's no foolproof method that I know of that will lock the editor to specific dimensions and prevent content from being created outside of those dimensions, but here's how I would tackle it:

Create a page with all of the elements positioned and sized to the exact dimensions that you need (like your mockups above) and make each element editable individually (see this example use CKEditor).

Then set the style to overflow: hidden. This will still allow users to create content but will hide anything outside of the dimensions of your boxes. Then, when you render the content:

• Set a max height on all of your elements
• Set the same overflow: hidden to hide any content that you did not want shown.

This admittedly a hack, but a quick way to solve the problem.