(Legacy) Predefined CKEditor 5 builds

# Overview

Predefined CKEditor 5 builds are a set of ready-to-use rich text editors. Every “build” provides a single type of editor with a set of features and a default configuration. They provide convenient solutions that can be installed with no effort and that satisfy the most common editing use cases.

The following CKEditor 5 builds are currently available:

• Classic editor
• Inline editor
• Balloon editor
• Balloon block editor
• Document editor
• Multi-root editor
• Superbuild

# Basic information

Each build was designed to satisfy as many use cases as possible. They differ in their UI, UX and features. A full list of plugins available in each build can be found in a later part of this guide.

# When NOT to use predefined builds?

CKEditor 5 Framework or a custom build should be used, instead of predefined builds, in the following cases:

• When you want to create your own text editor and have full control over its every aspect, from UI to features.
• When the solution proposed by the builds does not fit your specific use case.

# Download options

There are several options to download predefined CKEditor 5 builds:

• CDN
• npm
• Online builder
• Zip download

# CDN

Predefined CKEditor 5 builds can be loaded inside pages directly from CKEditor CDN, which is optimized for worldwide super-fast content delivery. When using CDN no download is actually needed. CKEditor is hosted on servers spread across the globe – the scripts are loaded faster because they are served from the nearest locations to the end user. If the same version of CKEditor has already been downloaded (even on a different website), it is loaded from cache. Using CDN reduces the number of HTTP requests handled by your server so it speeds it up as well.

However, CDN only offers ready-to-use, predefined packages (CKEditor 5 builds). This limits its customization capabilities.

# npm

All predefined builds are released on npm. Use this search link to view all official build packages available in npm.

Installing a build with npm is as simple as calling one of the following commands in your project:

npm install --save @ckeditor/ckeditor5-build-classic
# Or:
npm install --save @ckeditor/ckeditor5-build-inline
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon
# Or:
npm install --save @ckeditor/ckeditor5-build-balloon-block
# Or:
npm install --save @ckeditor/ckeditor5-build-decoupled-document

CKEditor 5 will then be available at node_modules/@ckeditor/ckeditor5-build-[name]/build/ckeditor.js. It can also be imported directly to your code by require( '@ckeditor/ckeditor5-build-[name]' ).

# Online builder

The online builder lets you download CKEditor 5 builds and also allows you to create your own, customized builds (with a different set of plugins) in a few easy steps, through a simple and intuitive UI.

# Zip download

Go to the CKEditor 5 download page and download your preferred build. For example, you may download the ckeditor5-build-classic-32.0.0.zip file for the classic editor build.

Extract the .zip file into a dedicated directory inside your project. It is recommended to include the editor version in the directory name to ensure proper cache invalidation once a new version of CKEditor 5 is installed.

# Included files

• ckeditor.js – The ready-to-use editor bundle, containing the editor and all plugins.
• ckeditor.js.map – The source map for the editor bundle.
• translations/ – The editor UI translations (see Setting the UI language).
• README.md and LICENSE.md

# Loading the API

After downloading and installing a predefined CKEditor 5 build in your application, it is time to make the editor API available in your pages. For that purpose, it is enough to load the API entry point script:

<script src="[ckeditor-build-path]/ckeditor.js"></script>

Once the CKEditor script is loaded, you can use the API to create editors in your page.

# Available builds

# Classic editor

Classic editor is what most users traditionally learnt to associate with a rich-text editor – a toolbar with an editing area placed in a specific position on the page, usually as a part of a form that you use to submit some content to the server.

During its initialization the editor hides the used editable element on the page and renders “instead” of it. This is why it is usually used to replace <textarea> elements.

In CKEditor 5 the concept of the “boxed” editor was reinvented:

• The toolbar is now always visible when the user scrolls the page down.
• The editor content is now placed inline in the page (without the surrounding <iframe> element). It is now much easier to style it.
• By default the editor now grows automatically with the content.

To try it out online, check the classic editor example.

In your HTML page add an element that CKEditor 5 should replace:

<div id="editor"></div>

Load the classic editor build (here, the CDN location is used):

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

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-classic

Then bundle it together with your app.

Call the ClassicEditor.create() method.

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

Full code example:

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

# Inline editor

Inline editor comes with a floating toolbar that becomes visible when the editor is focused (for example, by clicking it). Unlike classic editor, inline editor does not render instead of the given element, it simply makes it editable. As a consequence the styles of the edited content will be exactly the same before and after the editor is created.

A common scenario for using inline editor is offering users the possibility to edit content in its real location on a web page instead of doing it in a separate administration section.

To try it out online, check the inline editor example.

In your HTML page add an element that CKEditor 5 should make editable:

<div id="editor"></div>

Load the inline editor build (here, the CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/inline/ckeditor.js"></script>

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-inline

Then bundle it together with your app.

Call the InlineEditor.create() method.

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

Full code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 - Inline editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/inline/ckeditor.js"></script>
</head>
<body>
    <h1>Inline editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        InlineEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

# Balloon editor

Balloon editor is similar to inline editor. The difference between them is that the toolbar appears in a balloon next to the selection (when the selection is not empty):

To try it out online, check the balloon editor example.

In your HTML page add an element that CKEditor 5 should make editable:

<div id="editor"></div>

Load the balloon editor build (here CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/balloon/ckeditor.js"></script>

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-balloon

Then bundle it together with your app.

Call the BalloonEditor.create() method.

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

Full example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/balloon/ckeditor.js"></script>
</head>
<body>
    <h1>Balloon editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        BalloonEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

# Balloon block editor

Balloon block is essentially the balloon editor with an extra block toolbar which can be accessed using the button attached to the editable content area and following the selection in the document. The toolbar gives an access to additional, block–level editing features.

To try it out online, check the balloon block editor example.

In your HTML page add an element that CKEditor 5 should make editable:

<div id="editor"></div>

Load the balloon block editor build (here, the CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/balloon-block/ckeditor.js"></script>

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-balloon-block

Then bundle it together with your app.

Call the BalloonEditor.create() method.

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

Note: You can configure the block toolbar items using the config.blockToolbar option.

Full code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Balloon block editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/balloon-block/ckeditor.js"></script>
</head>
<body>
    <h1>Balloon editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        BalloonEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

# Document editor

The document editor is focused on rich-text editing experience similar to the native word processors. It works best for creating documents which are usually later printed or exported to PDF files.

To try it out online, check the document editor example.

Load the document editor build (here, the CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/decoupled-document/ckeditor.js"></script>

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-decoupled-document

Then bundle it together with your app.

Call the DecoupledEditor.create() method. The decoupled editor requires you to inject the toolbar into the DOM and the best place to do that is somewhere in the promise chain (for example, one of the then( () => { ... } ) blocks).

<script>
    DecoupledEditor
        .create( document.querySelector( '#editor' ) )
        .then( editor => {
            const toolbarContainer = document.querySelector( '#toolbar-container' );

            toolbarContainer.appendChild( editor.ui.view.toolbar.element );
        } )
        .catch( error => {
            console.error( error );
        } );
</script>

Full code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Document editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/decoupled-document/ckeditor.js"></script>
</head>
<body>
    <h1>Document editor</h1>

    <!-- The toolbar will be rendered in this container. -->
    <div id="toolbar-container"></div>

    <!-- This container will become the editable. -->
    <div id="editor">
        <p>This is the initial editor content.</p>
    </div>

    <script>
        DecoupledEditor
            .create( document.querySelector( '#editor' ) )
            .then( editor => {
                const toolbarContainer = document.querySelector( '#toolbar-container' );

                toolbarContainer.appendChild( editor.ui.view.toolbar.element );
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

# Multi-root editor

Multi-root editor is an editor type that features multiple, separate editable areas.

The main difference between using a multi-root editor and using multiple separate editors is the fact that in a multi-root editor all editable areas belong to the same editor instance share the same configuration, toolbar and the undo stack, and produce one document.

To try it out online, check the multi-root editor example.

In your HTML page add an element that CKEditor 5 should make editable:

<div id="editor"></div>

Load the multi-root editor build (here, the CDN location is used):

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/multi-root/ckeditor.js"></script>

Alternatively, you may install CKEditor 5 from npm:

npm install --save @ckeditor/ckeditor5-build-multi-root

Then bundle it together with your app.

Call the MultiRootEditor.create() method.

<script>
MultiRootEditor
    .create(
        // Define roots / editable areas:
        {
            header: document.querySelector( '#header' ),
            content: document.querySelector( '#content' ),
            leftSide: document.querySelector( '#left-side' ),
            rightSide: document.querySelector( '#right-side' )
        },
        // Editor configration:
        {
            cloudServices: {
                // All predefined builds included the Easy Image feature.
                // Provide correct configuration values to use it.
                tokenUrl: 'https://example.com/cs-token-endpoint',
                uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
                // For other image upload methods see the guide - https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html.
            }
        }
    )
    .then( editor => {
        window.editor = editor;

        // Append toolbar to a proper container.
        const toolbarContainer = document.querySelector( '#toolbar' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );

        // Make toolbar sticky when the editor is focused.
        editor.ui.focusTracker.on( 'change:isFocused', () => {
            if ( editor.ui.focusTracker.isFocused ) {
                toolbarContainer.classList.add( 'sticky' );
            } else {
                toolbarContainer.classList.remove( 'sticky' );
            }
        } );
    } )
    .catch( error => {
        console.error( 'There was a problem initializing the editor.', error );
    } );
</script>

Full code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – multi-root editor build – development sample</title>
    <style>
        body {
            max-width: 800px;
            margin: 20px auto;
        }

        .editor {
            border: #ccced1 1px solid;
            margin-top: 10px;
        }

        .boxes {
            margin-top: 10px;
            display: flex;
        }

        .box {
            margin-top: 0px;
            width: 50%;
        }

        /*
            Make the editable "fill" the whole box.
            The box will grow if the other box grows too.
            This makes the whole box "clickable".
        */
        .box .ck-editor__editable {
            height: 100%;
        }

        .box-left {
            margin-right: 10px;
        }

        /*
            When toolbar receives this class, it becomes sticky.
            If the toolbar would be scrolled outside of the visible area,
            instead it is kept at the top edge of the window.
        */
        #toolbar.sticky {
            position: sticky;
            top: 0px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div id="toolbar"></div>
<!--
    Wrapping the structure inside a pair of
    contenteditable="true" + contenteditable="false" elements
    is required to provide proper caret handling when
    using arrow keys at the start and end of an editable area.

    You can skip them if you don't want to move the
    caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
    <div contenteditable="false">
        <div class="editor">
            <div id="header">
                <p>This is the initial editor content.</p>
            </div>
        </div>
        <div class="editor">
            <div id="content">
                <p>This is the initial editor content.</p>
            </div>
        </div>
        <div class="boxes">
            <div class="box box-left editor">
                <div id="left-side">
                    <p>This is the initial editor content.</p>
                </div>
            </div>
            <div class="box box-right editor">
                <div id="right-side">
                    <p>This is the initial editor content.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/multi-root/ckeditor.js"></script>
<script>
    MultiRootEditor
        .create( {
            // Define roots / editable areas:
            header: document.getElementById( 'header' ),
            content: document.getElementById( 'content' ),
            leftSide: document.getElementById( 'left-side' ),
            rightSide: document.getElementById( 'right-side' )
        } )
        .then( editor => {
            window.editor = editor;

            // Append toolbar to a proper container.
            const toolbarContainer = document.getElementById( 'toolbar' );
            toolbarContainer.appendChild( editor.ui.view.toolbar.element );

            // Make toolbar sticky when the editor is focused.
            editor.ui.focusTracker.on( 'change:isFocused', () => {
                if ( editor.ui.focusTracker.isFocused ) {
                    toolbarContainer.classList.add( 'sticky' );
                } else {
                    toolbarContainer.classList.remove( 'sticky' );
                }
            } );
        } )
        .catch( error => {
            console.error( 'There was a problem initializing the editor.', error );
        } );
</script>

</body>
</html>

# Superbuild

The superbuild, available instantly from the CDN, is a pre-configured package that offers access to almost all available plugins and all predefined editor types.

To learn how to use the superbuild, refer to the CDN installation quick start guide.

# Plugins included in the predefined builds

The table below presents the list of all plugins included in various builds.

Plugin	Classic	Inline	Balloon	Balloon block	Document	Multi-root	Superbuild
Alignment	❌	❌	❌	❌	✅	❌	✅
Autoformat	✅	✅	✅	✅	✅	✅	✅
AutoImage	❌	❌	❌	❌	❌	❌	✅
Autolink	✅	✅	✅	✅	✅	✅	✅
Base64UploadAdapter	❌	❌	❌	❌	❌	❌	✅
BlockQuote	✅	✅	✅	✅	✅	✅	✅
Bold	✅	✅	✅	✅	✅	✅	✅
Case change	❌	❌	❌	❌	❌	❌	✅
CKBox	✅	✅	✅	✅	✅	✅	✅
CKFinder	✅	✅	✅	✅	✅	✅	✅
CloudServices	✅	✅	✅	✅	✅	✅	✅
Code	❌	❌	❌	❌	❌	❌	✅
CodeBlock	❌	❌	❌	❌	❌	❌	✅
Comments	❌	❌	❌	❌	❌	❌	✅
ContentTemplates	❌	❌	❌	❌	❌	❌	✅
DocumentOutline	❌	❌	❌	❌	❌	❌	✅
EasyImage	✅	✅	✅	✅	✅	✅	✅
Essentials * Includes: Clipboard Enter/ShiftEnter SelectAll Typing Undo Accessibility help dialog	✅	✅	✅	✅	✅	✅	✅
ExportPdf	❌	❌	❌	❌	❌	❌	✅
ExportWord	❌	❌	❌	❌	❌	❌	✅
FindAndReplace	❌	❌	❌	❌	❌	❌	✅
FontBackgroundColor, FontColor, FontFamily, FontSize	❌	❌	❌	❌	✅	❌	✅
FormatPainter	❌	❌	❌	❌	❌	❌	✅
GeneralHtmlSupport	❌	❌	❌	❌	❌	❌	✅
Heading	✅	✅	✅	✅	✅	✅	✅
Highlight	❌	❌	❌	❌	❌	❌	✅
HorizontalLine	❌	❌	❌	❌	❌	❌	✅
HtmlComment	❌	❌	❌	❌	❌	❌	✅
HtmlEmbed	❌	❌	❌	❌	❌	❌	✅
Image	✅	✅	✅	✅	✅	✅	✅
ImageCaption	✅	✅	✅	✅	✅	✅	✅
ImageResize	❌	❌	❌	❌	✅	❌	✅
ImageStyle	✅	✅	✅	✅	✅	✅	✅
ImageToolbar	✅	✅	✅	✅	✅	✅	✅
ImageUpload	✅	✅	✅	✅	✅	✅	✅
ImageInsert	❌	❌	❌	❌	❌	❌	✅
ImportWord	❌	❌	❌	❌	❌	❌	❌
Indent	✅	✅	✅	✅	✅	✅	✅
IndentBlock	❌	❌	❌	❌	✅	❌	✅
Italic	✅	✅	✅	✅	✅	✅	✅
Link	✅	✅	✅	✅	✅	✅	✅
LinkImage	❌	❌	❌	❌	❌	❌	✅
List	✅	✅	✅	✅	✅	✅	✅
ListProperties	❌	❌	❌	❌	✅	❌	✅
MathType	❌	❌	❌	❌	❌	❌	✅
MediaEmbed	✅	✅	✅	✅	✅	✅	✅
Mentions	❌	❌	❌	❌	❌	❌	✅
MultiLevelList	❌	❌	❌	❌	❌	❌	✅
PageBreak	❌	❌	❌	❌	❌	❌	✅
Pagination	❌	❌	❌	❌	❌	❌	✅
Paragraph *	✅	✅	✅	✅	✅	✅	✅
PasteFromOffice	✅	✅	✅	✅	✅	✅	✅
PasteFromOfficeEnhanced	❌	❌	❌	❌	❌	❌	✅
PictureEditing	✅	✅	✅	✅	✅	✅	✅
PresenceList	❌	❌	❌	❌	❌	❌	✅
RealTimeCollaborativeEditing, RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges	❌	❌	❌	❌	❌	❌	✅
RemoveFormat	❌	❌	❌	❌	❌	❌	✅
RevisionHistory	❌	❌	❌	❌	❌	❌	✅
ShowBlocks	❌	❌	❌	❌	❌	❌	✅
SlashCommand	❌	❌	❌	❌	❌	❌	✅
SpecialCharacters	❌	❌	❌	❌	❌	❌	✅
StandardEditingMode	❌	❌	❌	❌	❌	❌	✅
Strikethrough	❌	❌	❌	❌	✅	❌	✅
Subscript	❌	❌	❌	❌	❌	❌	✅
Superscript	❌	❌	❌	❌	❌	❌	✅
Table, TableToolbar	✅	✅	✅	✅	✅	✅	✅
TableOfContents	❌	❌	❌	❌	❌	❌	✅
TextPartLanguage	❌	❌	❌	❌	❌	❌	✅
TextTransformation	✅	✅	✅	✅	✅	✅	✅
TodoList	❌	❌	❌	❌	❌	❌	✅
TrackChanges	❌	❌	❌	❌	❌	❌	✅
TrackChangesData	❌	❌	❌	❌	❌	❌	✅
Underline	❌	❌	❌	❌	✅	❌	✅
UploadAdapter	✅	✅	✅	✅	✅	✅	✅
WordCount	❌	❌	❌	❌	❌	❌	✅
WProofreader	❌	❌	❌	❌	❌	❌	✅

Important notes
Plugins denoted with an asterisk (*) are essential for the editor to work and should never be removed.

# UMD support

Because builds are distributed as UMD modules, editor classes can be retrieved in various ways:

• By a CommonJS-compatible loader (like webpack or Browserify).
• By RequireJS (or any other AMD library).
• From the global namespace if none of these loaders is available.

For example:

// In the CommonJS environment.
const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' );
ClassicEditor.create( ... ); // [Function]

// If AMD is present, you can do this.
require( [ 'path/to/ckeditor5-build-classic/build/ckeditor' ], ClassicEditor => {
    ClassicEditor.create( ... ); // [Function]
} );

// As a global variable.
ClassicEditor.create( ... ); // [Function]

// As an ES6 module (if using webpack or Rollup).
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
ClassicEditor.create( ... ); // [Function]