For more than a year now, I've been adding functionality to a new revision of my website. It started from just the presentation, but now I've been working on the editor for making posts. Both the first and the second versions of my website had used the editor from the Dojo Toolkit, which has served me well, except for a few small issues. But, its age is definitely showing, and is now in a group of editors commonly referred to as "legacy" editors. However, in my search for a replacements, I discovered that the new fancy and shiny editors don't always fill the shoes of mature editors of old.
For the criteria, there were a few things that the editor needed to support: ability to insert links, images, videos, format text with common text formats, edit the source directly, and integration with Nuxt (and Vuetify); or provide a way to extend the functionality to support the aforementioned things. The following chart shows my findings after playing with some popular editors.
Criteria | |||||||
|---|---|---|---|---|---|---|---|
Format Text | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Insert Links, Images, and Videos | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
Edit Source Code | ✔ | ✔ | ✔ | ✘ | ✘ | ||
Extend Functionality | Hard, but Possible | N/A | Hard, but Possible | Hard, but Possible | ✔ | ✘ | |
Integrate with Nuxt (and Vuetify) | ✘ | ✔ | ✘ | ✔ | ✔ | ✔ | ✔ |
Cost / Licensing | Free | Free | Free |
And the winner is.... tiptap.
Tiptap is a modern WYSIWYG editor built on top of Prosemirror. It is "renderless", meaning that there isn't a native UI component, which frees the user to create their own. While tiptap-vuetify seemed to be a better fit, as it is built on top of Tiptap, but adds integration for Vuetify, it simultaneously made it harder to extend the functionality, which ended up being a dealbreaker. QuillJS, while being also a modern editor, turned out to be more hype than substance. The dealbreaker for QuillJS was that it is too opinionated, especially in regards to being opposed to supporting direct source code editing. The same issue was present for CKEditor 5, but with the additional luggage of restrictive licensing terms, which contributed to me passing up TinyMCE and CKEditor 4, as well. Froala, while being very popular, simply did not offer a free option, so it was not viable from the start.
While tiptap hasn't exactly been a dream to use, it has sufficient documentation and examples to help with guiding me through extending the functionality I needed to get the editor that fit my needs in a way that exceeded the Dojo Toolkit editor I was using. I've learned a lot along the way, and I've caught up on 10 years of WYSIWYG editor progress.
