A Javascript WYSIWYG Editor That Works on Mobile

There are a bunch of WYSIWYG editors, but they don’t really work on mobile devices. I think it’s time someone did something about it.

I wanted a nice editor for Snaplive. In particular, an editor that worked and behaved the same on both PC and mobile.

I do get that the desktop is usually seen as the tool for content creation, and mobile devices for content consumption. It would therefore make sense to have a regular WYWIWYG editor for PC—like the ones that most people use (TinyMCE, CKEditor, and the like)—and another version (or no version) specific for mobile.

However, for the user that would mean having to learn two different things. In my opinion, that’s one too much.

Why editors don’t work on mobile

There are dozens of WYSIWYG editors around. I love Hallo. I also like Aloha (although it doesn’t have the milimalistic approach that I love of Hallo). Of course, there are the classic TinyMCE and CKEditor.

I probably tried 50 different editors, but none seemed to work well on all mobile devices (that I could find, as of Jan, 2014).

The main problem that I found is that the controls are in the wrong spot for mobile devices. For instance, CKEditor is really awesome, but it shows its controls at the top (or bottom) of the editable area, which—for instance—gets totally covered by iOS’s copy/paste/etc. dialog when there is some text selected. The result? It’s impossibile to format the first sentence in the editor (ex., when right you start writing).

Other editors have controls right above selected text. This would cause the same problem as the above on the iPad, however.

The solution could be pretty simple and it’s implementable in some editors: just put the controls under the selected text. Unfortunately, that wouldn’t work, either: Android has some huge handles that it uses to select text, and that—again—would cover the WYSIWYG’s controls.

Also, for different reasons if I tried to click on the button to format text I would lose the selection, and stuff like that that would make the editor worthless.

To cut it short, I couldn’t find a single editor that worked well across all mobile devices (as well as PCs, of course).

It’s about time editors worked on mobile, too.

I don’t know if I’m a strange beast (perhaps), but since I live in a super-small European city I don’t even have a car, and use public transportation a lot—which means that I work on my iPad all the time. And, I would love to keep working the same way and be able to do pretty much the same stuff that I do on my Mac.

I understand that a tablet is not a PC, and the OS and software should be simpler, but I think some things should still work.

In a world where people are increasingly using mobile devices to do everything, wouldn’t it be time someone built a editor that worked the same on tablets and cell phones? I think so.

What to do about it

I’m going to try to build a WYSIWYG editor that works well on both PC/Mac, iPad/iPhone, and Android. Actually, I already started [EDIT (21/01/2014): got a prototype, and will log my progress here: http://nbrogi.com/etc/wysiwyg/]

Will I succeed? Maybe not. Will the code be full of hacks? Absolutely.

One thing is for sure: I think there is a need for something like this. Perhaps I didn’t look hard enough and someone has already done this (please let me know if so). Regardless, if I succeed in at least building a proof of concept, I might spark some interest and if my own editor is good enough I and other people will use that one, otherwise someone else will build a better one.

Either way, I’ll be able to post on my blog while waiting for my stop on the bus.

And that will make me happy.

My name is Niccolò Brogi, I’m a web developer/consultant from Florence, Italy. You can learn more about me on my website.