Ever heard of CKEditor? If you've been in the dev game for a while, you probably have. CKEditor is one of the most popular WYSIWYG editor components and has been around since 2003 👀
Back in the day, if you were messing around with WYSIWYG editor components, you had two big names to explore: TinyMCE and CKEditor. Today there’s a flood of new projects like Quill, Tiptap, or Lexical. So where does that leave CKEditor? Is it still the cool kid on the block, or has another project taken the mantle?
Before we answer that question, let's clear the air… we often see comparisons between some of the newer projects and CKEditor 4! That’s just silly, CKEditor 4 came out in 2012 and there’s a whole new version 5 available, and it’s not a minor update. CKEditor 5 is a total revamp, built from scratch by the same incredible team that has more experience with editors than anyone.
So is CKEditor still at the forefront? Let’s dive in…
Ditching "contenteditable" for a custom data model
"Contenteditable" is a browser feature that lets users edit specific container content. By adding a UI layer on top of it and utilizing some available APIs, you get a WYSIWYG editor. This is how older editors, including CKEditor 4, operated.
But with inconsistent implementations across browsers old-school editors often faced compatibility issues, necessitating painful workarounds. CKEditor 5's solution? Bypass "contenteditable" entirely in favor of a custom data model.
This approach not only ensures consistent performance across browsers but also empowers developers with robust tools to debug document internals.
This allows for more stable solutions and a much better developer experience. Features get released faster and users enjoy a high quality experience using their favorite web browser.
Storage flexibility
It's a misconception that documents must always be stored in HTML format. Some editors use internal JSON data structures. Indeed, not all documents are destined for web display; some might be downloaded as PDFs.
While CKEditor 5 defaults to HTML storage, it's adaptable. Thanks to its custom data model, you can store data in its raw form, convert it to HTML, Markdown (with an official plugin), JSON or any other format using custom plugins.
This allows developers to design a perfect architecture for the projects with specific needs; this results in a better codebase which is easier to maintain. That means shorter release cycles, more stable software, and efficiency throughout the project lifecycle.
TypeScript, oh yeah!
Many new editors tout their modern codebases and type availability. Though CKEditor began as a JavaScript project without typing, the team successfully transitioned the entire codebase to TypeScript, enhancing the developer experience.
Typed code is basically the standard nowadays, no new libraries come out without types, and for good reason! Strong typing saves hours of debugging, the compiler simply catchesissues even before the code is deployed.
Advanced features galore
CKEditor 5's flexible architecture allows for extensive customization. This adaptability has enabled the development of intricate features available through official plugins. Moreover, developers can create custom plugins tailored to specific business needs. Many official plugins can serve as templates for custom ones.
From tables and media elements to keyboard shortcuts and pagination, CKEditor 5 has it all. This allows you to build almost any editing experience with configuration alone. If you’re working on a custom experience, you’ve got an amazing foundation to your disposal.
Modern vibes
With tools like Notion and Canvas setting new standards, users now anticipate a more contemporary editing experience. CKEditor 5 doesn't disappoint. Many cutting edge features are readily available and work out of the box:
- Adding media using drag-n-drop
- Reordering content blocks using drag-n-drop
- Expanding inserted links into embedded videos or page previews
- Inserting new content using a “slash command”
- Adding editing suggestions and comments
- Autosave
- Real-time collaboration
.webp)
It’s worth noting that some out-of-the-box features might require purchasing a license since they rely on the company’s cloud solutions. On-premise options are also at your disposal, so you’ve got plenty of options whether you’re at an early-stage startup or enterprise.
Need Help Navigating the Landscape?
Flexum is a CKEditor partner so we can help guide you through any technology, customization, or licensing issues. Share your feature wishlist and we’ll guide you down the most efficient path, get in touch hi@flexum.io
