Elastic: HTML editor

The last big part of the Roundcube user interface not yet ported to Elastic was the HTML editor. And it was left untouched for so long for a reason. Read more to find out why and what I achieved throughout the last week.

The TinyMCE editor we use is probably the best open source HTML editor available (competing close with CKEditor). However its architecture or some techniques used to draw the UI look very old (and still buggy). So, it wasn’t an easy task to apply some styles to make it look (and behave) “elastic”. No wonder the old skin uses unmodified theme.

Writing a separate complete theme for TinyMCE looked even more scary, so I decided to add some css rules and javascript code on top of what it provides by default. The current result is that, aside of some overall improvements, we have all dialogs look as any other dialog in Elastic.

elastic-editor-dialog

I also redesigned our image selector to look more unified with the rest (i.e. other upload forms).

elastic-image-selector

TinyMCE isn’t really usable on mobile. Even the experimental mobile mode (available in v4.7) wasn’t what I’d expect. I did it in the Elastic-way. So, dialogs are nice, the toolbar is simplified and some elements are bigger. There’s still place for improvements. E.g. menus and selection lists are not displayed as other mobile (side-)menus. And some more refinements to elements size for touch devices will be needed.

elastic-html-editor-mobile

To conclude, the more I work with TinyMCE in Roundcube the more thoughts I have like this: Do we really need all these editing features? Could we replace it with something simpler and modern? Could we get rid of HTML vs Plain text mode switching at all? Sounds like a big undertaking with a lot of research and planning, right? Something to think about in another time.

Advertisements

4 thoughts on “Elastic: HTML editor

  1. Something why Roundcube next becomes a more important issue, and why Elastic is only a short term solution.

    Well if gmail, fastmail and even yahoo can deliver push updates in webmail without need to refresh, it puts Kolab now behind – which isn’t where they need to be.

    Other great stuff like Kube, cloudsuite etc is cool, and Elastic certainly helps, but it’s only a stopgap measure whilst Kolab figure out what do do about Roundcube next. I sincerely it’ll help aid development.

    Or at the very least with a high quality elastic, means Kolab can take their time building Roundcube next at a steady pace with the comfort of knowing Elastic keeps things just enough to stop them from slipping behind.

    Like

  2. Nice work on the new UI! The Tiny team has a new responsive UX we are working on “full court press” over the next three months that should make it more modern.

    Like

Comments are closed.