CKEditor 5: Beginners Guide to Rich Text Editing

5 min readOct 30, 2023

If you own a blog and wish to update a blog post, you might encounter challenges without a WYSIWYG (What You See Is What You Get) editor. This situation would require you to grapple with HTML tags and code, potentially resulting in errors and frustration 🤦‍♀️.

However, this is precisely where CKEditor comes in. Developed by the CKSource team, CKEditor is a popular rich text editor that allows users to create and edit content in a format closely resembling its final output. Instead of dealing with plain text or code, you can visually format your content, much like you would in traditional word processing software.

CKEditor 5, the latest version of CKEditor, provides an accessible framework for content creation. Unlike CKEditor 4, CKEditor 5 introduces a new data model that enables advanced features like real-time collaborative editing. Its architecture and plugins are meticulously designed to seamlessly offer both classic and inline editing experiences.

Why Use CKEditor 5?

Here are some scenarios where CKEditor 5 proves to be beneficial:

Content Management Systems (CMS): Websites with a CMS backend often use CKEditor to allow users to add and edit content without any HTML knowledge. This makes updating website content easy for non-developers.
Web Applications: Applications that have features like note-taking, email composition, or any form of content creation/editing can use CKEditor to enhance the user experience.
Blogs and Forums: Websites that allow users to write blogs or forum posts can use CKEditor for content creation, giving users an array of formatting tools.
Collaborative Platforms: Platforms that require multiple users to work on the same document can leverage CKEditor’s collaborative features.
Custom Solutions: Developers who want a solid base for building a customized text editor for specific needs can use CKEditor as a foundation and then add or remove features as needed.

Running a Basic CKEditor 5

Creating a CKEditor 5 is straightforward, you’ll need:

Load the desired editor build via the <script> tag.

Note: This is using the classic editor build

<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>

2. Call the static create() method to create the editor.

<script>
    ClassicEditor
        .create( document.querySelector( '#editor' ) )
        .catch( error => {
            console.error( error );
        } );
</script>

Trying it Out

Here’s a sample webpage with the CKEditor 5 build:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Example CKEditor 5 Classic editor</h1>
    <div id="editor">
        <p>I want to write some content</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Open this in your browser to experience CKEditor 5 in action.

First Use

For first-time users of CKEditor 5, you’ll encounter a sleek and intuitive editor interface. The toolbar at the top offers various functions, including text formatting, media insertion, and more. Dive right in by typing or pasting your content, and make use of the toolbar or familiar keyboard shortcuts for formatting.

Standout Features of CKEditor 5

CKEditor 5 is constructed using a modular system, empowering developers to craft custom builds that incorporate only the features they require. This flexibility guarantees a lightweight and efficient editor tailored to specific project needs. Here’s why CKEditor 5 shines:

File Upload: It offers a modern, secure way to upload, store, and serve images and files. Edit images within CKBox and seamlessly add them into CKEditor.

2. HTML and Markdown Editor: CKEditor 5 lets you switch between editing raw Markdown code and using the WYSIWYG editor to create content. You don’t need to be well-versed in Markdown syntax. With the CKEditor5, it accepts any HTML element, attribute, style, or class.

3. Real-Time Collaborative Editing: CKEditor 5 introduces real-time collaborative editing, allowing multiple users to collaborate simultaneously with features like presence lists, comments, and track changes. Whether you prefer real-time or asynchronous collaboration, it’s a game-changer for content teams, editors, and collaborative platforms.

4. Mobile-First Design: CKEditor 5 adopts a mobile-first approach, ensuring a consistent and user-friendly experience across various devices, be it desktops, tablets, or smartphones

5. Multilingual Support: CKEditor offers a fully translated UI in over 40 languages.

6. Export to PDF and Word: With CKEditor 5, you can effortlessly convert your content into the desired file format.

For a deeper dive into its features and what sets CKEditor 5 apart, visit CKEditor’s demo page.

Wrap Up

In a nutshell, CKEditor 5 provides an intuitive way for users to create and format web content without needing to dive into the intricacies of HTML or CSS. Its flexibility and vast feature set make it a preferred choice for a wide range of applications, from simple websites to complex web apps. Whether you’re a developer looking to integrate a robust editor into your project or a content creator seeking a user-friendly tool, CKEditor offers a solution to meet those needs.