Creating Custom Ckeditor5 Builds

I don’t quite understand how some problems that feel very commonplace and like they would obviously be solved by browsers a long time ago are still in very much flux and unsolved in 2021. One of those things is basic image handling in WYSIWYG editors. By basic image handling I mean aligning, resizing, and uploading. Most users who need these kind of things are probably using proper CMSes or SaaS services so building things like these are not as common as one might think. Anyways, I needed to build a simple note-taking app with basic image support and after spending almost a full day comparing and testing various solutions, I ended up choosing Ckeditor 5 because it seemed to have the biggest developer community, and mature and very user-friendly image plugins.

Ckeditor5

Ckeditor like TinyMCE have been around forever. The good: it has all the features you can possibly imagine already available, and the important ones are also mature enough to use safely. The bad: despite of being the “new” version of Ckeditor, it’s very much oldskool in many ways. For example there is no TypeScript support and it’s tightly coupled with old Webpack.

Ckeditor5 ships with a Vue (2 and 3) component but it has little to no actual value over using the vanilla JS class instead. The more unfortunate thing about Ckeditor5 is that using any plugins that are not included in the pre-configured builds requires you to manually configure and compile your own version of the editor. (If your project happens to use old version of Webpack, you can use the source version instead after adding the necessary configuration to your Webpack config.)

So, after banging my head long enough into a wall, I went ahead and created a custom build for the project.

Creating A Custom Build

This is luckily documented pretty well. You need to fork the ckeditor/ckeditor5 repo, create a new branch from stable, pick an existing build that most closely matches what you need, and then modify src/ckeditor.js and webpack.config.js under that builds directory.

Most likely you also want to modify the corresponding package.json and publish the custom-built editor to a package registry so you can use it in your project.

The Costs

Creating and maintaning a custom build of a third-party package is obviously quite painful and suboptimal way of adding a dependency to your project, but it is open source and free. Before adding this kind of dependency in a commercial project you need to think hard about the cost of keeping it updated and safe. If you don’t have an easy way to automate the process and/or follow the upstream releases, I would advice against of using this method. (Tip: try searching NPM for ckeditor5-build for a suitable third-party maintained package you could use instead. There are packages like @blowstack/ckeditor5-full-free-build that are fairly well maintained and might suit your needs. YMMW.)

Note For Future

The upcoming version 2 of TipTap seems very promising modern alternative to Ckeditor. It’s headless (you are fully in control of both markup and CSS), written TypeScript, and will support Vue 3 out of the box. Based on the current demos it should handle minimal image operations (adding, aligning) easily and writing the rest could be split for example into a separate open source project.

I’m still amazed that something like this is not yet a solved problem!