How to customize your CKEditor 5 build by removing features (plugins)

5 min readFeb 12, 2024

Setting up a rich-text editor is not a “one size fits all” approach. While the predefined CKEditor 5 builds offer numerous features for most editing scenarios, they might not always align with your specific needs.

For instance, if your application includes both a blog and a comment section, the needs for these two sections can differ significantly. The blog may require a wide range of formatting options, such as headings, image uploads, and embedding capabilities. On the other hand, the comment section may only need basic text formatting tools like bold, italic, and links. Using the same feature-rich editor in both areas can lead to unnecessary complexity and user confusion.

This is where CKEditor 5 shines, as it is designed to be highly customizable. You can easily remove features (plugins) that are not necessary for your specific use case, creating a cleaner and more focused editor. For example, in a comments section that requires only basic formatting, you can remove advanced features such as media embedding, image uploading, or table editing to simplify the UX.

This article explains how you can customize your editor by removing features that you do not need, enabling you to create a text editor that is perfectly suited to your unique needs.

Let’s dive in!

Customize your CKEditor 5 build: step-by-step

The following demo shows the steps involved in customizing the Classic CKEditor 5 build by removing features (plugins).

Note: These steps can be adapted for any CKEditor 5 predefined build of your choice.

Prerequisite

Before you start, here are a few things you should have:

HTML, CSS, and JavaScript knowledge
A text editor such as Sublime Text or VS Code

Step 1: Set up your CKEditor 5 predefined build

Create a new index.html file in your text editor, and add the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 - Classic editor</title>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
</body>
</html>

2. Add a script tag in the <head> section of your HTML document to load the classic editor build from the CKEditor 5 CDN

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

3. Add a second script tag, then copy and paste the following JavaScript code into it. This code uses the ClassicEditor.create() method to display and initialize the CKEditor 5

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

4. Save the changes, and test out the demo by opening the index.html file in your browser. Make use of localhost testing tools, such as the Python local host command, PHP local host command, or Node.js local host command

Step 2: List the plugins in your build

CKEditor 5 introduces features through plugins, and each build contains several plugins to satisfy various use cases. This step is essential when customizing the editor because it allows you to identify which plugins in your build you want to remove or keep.

The JavaScript expression ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName) is used to list the names of all built-in plugins that come with the CKEditor 5 Classic build.

Modify the code to log the names of all the plugins in the console by adding the javascript expression

<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
})
.then( editor => {
console.log( 'Editor was initialized', editor );
console.log( 'Available plugins:', ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ) );
})
.catch( error => {
console.error( error.stack );
});
</script>

2. Open the developer console in your browser on the CKEditor demo index.html page to view the list of plugins

Step 3: Remove features from your editor

The CKEditor 5 you’ve set up comes loaded with various editing options. However, for this demo, our aim is to create a minimalistic editor suitable for basic formatting needs. To achieve this, you’ll need to use the list of plugins from the previous step to identify features that are unnecessary. With removePlugins, you can precisely specify which plugins to exclude from your CKEditor 5 build.

Add the removePlugins array with the names of the plugins you want to remove as strings

<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
removePlugins: [ 'BlockQuote', 'Table', 'MediaEmbed', 'Indent', 'Heading'],
})
.then( editor => {
console.log( 'Editor was initialized', editor );
console.log( 'Available plugins:', ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ) );
})
.catch( error => {
console.error( error.stack );
});
</script>

Note: Verify the plugin names from the list of plugins in your console.

2. Save your changes and run the editor in your browser to ensure that the necessary plugins have been removed

Managing Dependencies Between Plugins

When customizing CKEditor 5, it’s crucial to understand plugin dependencies. Some plugins rely on others to function properly. If you remove a plugin but leave its dependent plugins, this can cause errors in your editor.

Assuming you want to further simplify your editor by removing the “ImageUpload” plugin, this will throw an error in the console of your browser. This is because it is dependent on another plugin.

<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
removePlugins: [ 'BlockQuote', 'Table', 'MediaEmbed', 'Indent', 'Heading', 'ImageUpload'],
})
.then( editor => {
console.log( 'Editor was initialized', editor );
console.log( 'Available plugins:', ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ) );
})
.catch( error => {
console.error( error.stack );
});
</script>

To avoid such issues, you need to ensure that you remove all dependent plugins together. In this case, the dependent plugin is “EasyImage”.

Modify the code to contain the plugin we want to remove (ImageUpload) and the dependent plugin (EasyImage)

<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
removePlugins: [ 'BlockQuote', 'Table', 'MediaEmbed', 'Indent', 'Heading', 'ImageUpload', 'EasyImage'],
})
.then( editor => {
console.log( 'Editor was initialized', editor );
console.log( 'Available plugins:', ClassicEditor.builtinPlugins.map( plugin => plugin.pluginName ) );
})
.catch( error => {
console.error( error.stack );
});
</script>

Note: To determine which plugins are dependent on each other, check the error thrown in the browser console.

2. Save and run in your browser to see the reflected change

More ways to customize your builds

Aside from removing features, there are other ways to tailor your CKEditor 5 UX to your specific needs. you can:

override the default configuration of features (e.g., define different image styles or heading levels)
change the default toolbar configuration (e.g., remove undo and redo buttons)

If you don’t want to do any of this, you can create a custom build using the online builder.

Regardless of the method you use, you can easily customize your editor to fit any use case.