Migrating from predefined builds

Before version 42.0.0, the predefined builds were the easiest way to get started with CKEditor 5. They provided an out-of-the-box editor with a predefined set of plugins and a default configuration. However, they had limitations, such as the inability to customize the editor by adding or removing plugins.

The new installation methods solve this problem. They allow you to fully customize the editor, whether you use npm packages or browser builds.

Migrating from the predefined builds to the new installation methods should mostly be a matter of copying and pasting the code below to replace the old code. The code to copy depends on the build and distribution method you used.

# Prerequisites

Before you start, follow the usual upgrade path to update your project to use the latest version of CKEditor 5. This will rule out any problems that may be caused by upgrading from an outdated version of CKEditor 5.

# Migration steps

# npm

If you are using predefined builds from npm, follow the steps below:

Start by uninstalling the old build package. It can be identified by the @ckeditor/ckeditor5-build- prefix. For example, if you were using the @ckeditor/ckeditor5-build-classic package, you should uninstall it. Below is the command to uninstall all predefined builds.

npm uninstall \
    @ckeditor/ckeditor5-build-balloon \
    @ckeditor/ckeditor5-build-balloon-block \
    @ckeditor/ckeditor5-build-classic \
    @ckeditor/ckeditor5-build-decoupled-document \
    @ckeditor/ckeditor5-build-inline \
    @ckeditor/ckeditor5-build-multi-root

Next, install the ckeditor5 package. This package contains the editor and all of our open-source plugins.
```
npm install ckeditor5
```
(Optional) If you are using premium features from our commercial offer, you should also install the ckeditor5-premium-features package.
```
npm install ckeditor5-premium-features
```

Open the file where you initialized the editor. Then replace the import statement and the initialization code depending on the build you are using.

Classic editor

Before:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    ClassicEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

class Editor extends ClassicEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Inline editor

Before:

import InlineEditor from '@ckeditor/ckeditor5-build-inline';

InlineEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    InlineEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

class Editor extends InlineEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Balloon editor

Before:

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';

BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Balloon block editor

Before:

import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';

BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    BlockToolbar,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

/*
Create an additional stylesheet file with the given content:

.ck.ck-block-toolbar-button {
    transform: translateX( calc(-1 * var(--ck-spacing-large)) );
}
*/

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        BlockToolbar,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        blockToolbar: [
            'undo', 'redo',
            '|', 'heading',
            '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
            '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
        ],
        toolbar: {
            items: [
                'bold', 'italic', 'link'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Decoupled document editor

Before:

import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

DecoupledEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    DecoupledEditor,
    Essentials,
    Alignment,
    FontSize,
    FontFamily,
    FontColor,
    FontBackgroundColor,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    Strikethrough,
    Underline,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    IndentBlock,
    Link,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

class Editor extends DecoupledEditor {
    static builtinPlugins = [
        Essentials,
        Alignment,
        FontSize,
        FontFamily,
        FontColor,
        FontBackgroundColor,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        Strikethrough,
        Underline,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        IndentBlock,
        Link,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'underline', 'strikethrough',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'alignment',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            resizeUnit: 'px',
            toolbar: [
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Multi-root editor

Before:

import DecoupledEditor from '@ckeditor/ckeditor5-build-multi-root';

MultiRootEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

After:

import {
    MultiRootEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

class Editor extends MultiRootEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );

Unlike when using predefined builds, you are now free to customize the editor by adding or removing plugins. However, before you do this, you should test the editor to make sure it works as expected.

# CDN

If you are using the predefined builds from CDN, follow the steps below depending on whether you want to use JavaScript modules (ESM) with imports or standard (UMD) scripts with global variables.

# CDN with imports

One notable difference between the old build and the new ESM build is that the former uses the <script> tags while the latter uses the <script type="module"> tags, which behave differently in some cases. For more information, see this MDN page explaining the differences between modules and standard scripts.

Start by removing the <script> tags that contain the old build.

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

Add the <link> tags to include the editor’s CSS files and the <script type="importmap"> tag to map the package names to the build URLs.

2.1 If you only use the open-source features:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css" />

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.1/"
    }
}
</script>

2.2 If you also use premium features from our commercial offer:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.1.1/ckeditor5-premium-features.css" />

<script type="importmap">
{
    "imports": {
        "ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.js",
        "ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.1/",
        "ckeditor5-premium-features": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.1.1/ckeditor5-premium-features.js",
        "ckeditor5-premium-features/": "https://cdn.ckeditor.com/ckeditor5-premium-features/43.1.1/"
    }
}
</script>

Replace the old <script> tag, which contains the initialization code, depending on the build you are using.

Classic editor

Before:

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

After:

<script type="module">
import {
    ClassicEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

class Editor extends ClassicEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Inline editor

Before:

<script>
InlineEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    InlineEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

class Editor extends InlineEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Balloon editor

Before:

<script>
BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Balloon block editor

Before:

<script>
BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    BlockToolbar,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

/*
Create an additional stylesheet file with the given content:

.ck.ck-block-toolbar-button {
    transform: translateX( calc(-1 * var(--ck-spacing-large)) );
}
*/

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        BlockToolbar,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        blockToolbar: [
            'undo', 'redo',
            '|', 'heading',
            '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
            '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
        ],
        toolbar: {
            items: [
                'bold', 'italic', 'link'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Decoupled document editor

Before:

<script>
DecoupledEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    DecoupledEditor,
    Essentials,
    Alignment,
    FontSize,
    FontFamily,
    FontColor,
    FontBackgroundColor,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    Strikethrough,
    Underline,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    IndentBlock,
    Link,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

class Editor extends DecoupledEditor {
    static builtinPlugins = [
        Essentials,
        Alignment,
        FontSize,
        FontFamily,
        FontColor,
        FontBackgroundColor,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        Strikethrough,
        Underline,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        IndentBlock,
        Link,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'underline', 'strikethrough',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'alignment',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            resizeUnit: 'px',
            toolbar: [
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Multi-root editor

Before:

<script>
MultiRootEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    MultiRootEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} from 'ckeditor5';

class Editor extends MultiRootEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Superbuild

Please note that the snippet below does not include plugins for the math equations and chemical formulas and spelling, grammar, and punctuation checking features which were part of the old superbuild.

Please contact us if you require these features in the CDN distribution.

Before:

<script>
ClassicEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script type="module">
import {
    ClassicEditor as ClassicEditorBase,
    InlineEditor as InlineEditorBase,
    BalloonEditor as BalloonEditorBase,
    DecoupledEditor as DecoupledEditorBase,
    CKFinderUploadAdapter,
    Alignment,
    Autoformat,
    Bold,
    Italic,
    Underline,
    Strikethrough,
    Superscript,
    Subscript,
    Code,
    BlockQuote,
    CKBox,
    CKBoxImageEdit,
    CKFinder,
    CloudServices,
    CodeBlock,
    EasyImage,
    Essentials,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    AutoImage,
    ImageResize,
    ImageUpload,
    ImageInsert,
    PictureEditing,
    Indent,
    IndentBlock,
    TextPartLanguage,
    Link,
    AutoLink,
    LinkImage,
    List,
    ListProperties,
    TodoList,
    MediaEmbed,
    Paragraph,
    FindAndReplace,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Highlight,
    HorizontalLine,
    HtmlEmbed,
    GeneralHtmlSupport,
    HtmlComment,
    Mention,
    PageBreak,
    PasteFromOffice,
    RemoveFormat,
    StandardEditingMode,
    ShowBlocks,
    Style,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersEssentials,
    Table,
    TableToolbar,
    TableCellProperties,
    TableProperties,
    TableCaption,
    TableColumnResize,
    TextTransformation,
    WordCount,
    Base64UploadAdapter
} from 'ckeditor5';

import {
    AIAssistant,
    OpenAITextAdapter,
    CaseChange,
    Comments,
    ExportPdf,
    ExportWord,
    MultiLevelList,
    Pagination,
    RealTimeCollaborativeComments,
    RealTimeCollaborativeRevisionHistory,
    RealTimeCollaborativeTrackChanges,
    RevisionHistory,
    TrackChanges,
    TrackChangesData
} from 'ckeditor5-premium-features';

class ClassicEditor extends ClassicEditorBase {}

class InlineEditor extends InlineEditorBase {}

class BalloonEditor extends BalloonEditorBase {}

class DecoupledEditor extends DecoupledEditorBase {}

for ( const Editor of [ ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor ] ) {
    // Plugins to include in the build.
    Editor.builtinPlugins = [
        AIAssistant, OpenAITextAdapter,
        Base64UploadAdapter,
        Alignment,
        Autoformat,
        Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code,
        BlockQuote,
        CKBox, CKBoxImageEdit,
        CKFinder, CKFinderUploadAdapter,
        CloudServices,
        CodeBlock,
        Comments,
        EasyImage,
        Essentials,
        ExportPdf,
        ExportWord,
        Heading,
        Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing,
        Indent, IndentBlock,
        TextPartLanguage,
        Link, AutoLink, LinkImage,
        List, ListProperties, TodoList,
        MultiLevelList,
        MediaEmbed,
        Paragraph,
        FindAndReplace,
        FontBackgroundColor, FontColor, FontFamily, FontSize,
        Highlight,
        HorizontalLine,
        HtmlEmbed,
        GeneralHtmlSupport, HtmlComment,
        Mention,
        PageBreak,
        PasteFromOffice,
        Pagination,
        RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, PresenceList,
        RemoveFormat,
        RevisionHistory,
        StandardEditingMode,
        ShowBlocks,
        Style,
        SpecialCharacters, SpecialCharactersEssentials,
        Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize,
        TrackChanges, TrackChangesData,
        TextTransformation,
        WordCount,
        DocumentOutline, TableOfContents, FormatPainter, Template, SlashCommand, PasteFromOfficeEnhanced, CaseChange
    ];

    Editor.defaultConfig = {
        toolbar: [
            'aiCommands', 'aiAssistant',
            '|',
            // Productivity pack.
            'tableOfContents', 'formatPainter', 'insertTemplate', 'caseChange',
            '|',
            'pagination',
            '|',
            'trackChanges', 'revisionHistory', 'comment',
            '|',
            'heading', 'style',
            '|',
            'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'link',
            '|',
            'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
            '|',
            'bulletedList', 'numberedList', 'multiLevelList', 'todoList',
            '|',
            'blockQuote', 'uploadImage', 'insertTable', 'mediaEmbed', 'codeBlock',
            '|',
            'htmlEmbed',
            '|',
            'alignment', 'outdent', 'indent',
            '|',
            'pageBreak', 'horizontalLine', 'specialCharacters',
            '|',
            'textPartLanguage',
            '|',
            'showBlocks',
            '|',
            'undo', 'redo', 'findAndReplace'
        ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
            ]
        },
        image: {
            styles: [
                'alignCenter',
                'alignLeft',
                'alignRight'
            ],
            resizeOptions: [
                {
                    name: 'resizeImage:original',
                    label: 'Original size',
                    value: null
                },
                {
                    name: 'resizeImage:50',
                    label: '50%',
                    value: '50'
                },
                {
                    name: 'resizeImage:75',
                    label: '75%',
                    value: '75'
                }
            ],
            toolbar: [
                'imageTextAlternative', 'toggleImageCaption', '|',
                'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|',
                'resizeImage', '|',
                'ckboxImageEdit'
            ],
            insert: {
                integrations: [
                    'insertImageViaUrl'
                ]
            }
        },
        comments: {
            editorConfig: {
                extraPlugins: [ Bold, Italic, Underline, List ]
            }
        },
        placeholder: 'Type the content here!',
        language: 'en'
    };

    // Enable the `SourceEditing` plugin for ClassicEditor only.
    if ( Editor === ClassicEditor ) {
        Editor.builtinPlugins.push( SourceEditing );

        Editor.defaultConfig.toolbar.push( '|', 'sourceEditing' );
    }

    // Enable the `Pagination` plugin for DecoupledEditor only.
    if ( Editor === DecoupledEditor ) {
        Editor.builtinPlugins.push( Pagination );

        Editor.defaultConfig.toolbar.unshift( 'sourceEditing', '|' );

        Editor.defaultConfig.pagination = {
            // A4
            pageWidth: '21cm',
            pageHeight: '29.7cm',

            pageMargins: {
                top: '20mm',
                bottom: '20mm',
                right: '12mm',
                left: '12mm'
            }
        };
    }
}

ClassicEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Unlike when using predefined builds, you are now free to customize the editor by adding or removing plugins. However, before you do this, you should test the editor to make sure it works as expected.

# CDN with global variables

Start by removing the <script> tags that contain the old build.

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

Add the <link> and <script> tags to include the editor’s styles and code.

2.1 If you only use the open-source features:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css" />
<script src="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.umd.js"></script>

2.2 If you also use premium features from our commercial offer:

<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css" />
<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/43.1.1/ckeditor5-premium-features.css" />
<script src="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.umd.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5-premium-features/43.1.1/ckeditor5-premium-features.umd.js"></script>

Replace the old <script> tag, which contains the initialization code, depending on the build you are using.

Classic editor

Before:

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

After:

<script>
const {
    ClassicEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

class Editor extends ClassicEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Inline editor

Before:

<script>
InlineEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    InlineEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

class Editor extends InlineEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Balloon editor

Before:

<script>
BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Balloon block editor

Before:

<script>
BalloonEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    BalloonEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    BlockToolbar,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

/*
Create an additional stylesheet file with the given content:

.ck.ck-block-toolbar-button {
    transform: translateX( calc(-1 * var(--ck-spacing-large)) );
}
*/

class Editor extends BalloonEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        BlockToolbar,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        blockToolbar: [
            'undo', 'redo',
            '|', 'heading',
            '|', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
            '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
        ],
        toolbar: {
            items: [
                'bold', 'italic', 'link'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Decoupled document editor

Before:

<script>
DecoupledEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    DecoupledEditor,
    Essentials,
    Alignment,
    FontSize,
    FontFamily,
    FontColor,
    FontBackgroundColor,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    Strikethrough,
    Underline,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    IndentBlock,
    Link,
    List,
    ListProperties,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

class Editor extends DecoupledEditor {
    static builtinPlugins = [
        Essentials,
        Alignment,
        FontSize,
        FontFamily,
        FontColor,
        FontBackgroundColor,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        Strikethrough,
        Underline,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        IndentBlock,
        Link,
        List,
        ListProperties,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
                '|', 'bold', 'italic', 'underline', 'strikethrough',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'alignment',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            resizeUnit: 'px',
            toolbar: [
                'imageStyle:inline',
                'imageStyle:wrapText',
                'imageStyle:breakText',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Multi-root editor

Before:

<script>
MultiRootEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    MultiRootEditor,
    Essentials,
    CKFinderUploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    CKBox,
    CKFinder,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    PictureEditing,
    Indent,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    PasteFromOffice,
    Table,
    TableToolbar,
    TextTransformation,
    CloudServices
} = CKEDITOR;

class Editor extends MultiRootEditor {
    static builtinPlugins = [
        Essentials,
        CKFinderUploadAdapter,
        Autoformat,
        Bold,
        Italic,
        BlockQuote,
        CKBox,
        CKFinder,
        CloudServices,
        EasyImage,
        Heading,
        Image,
        ImageCaption,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Indent,
        Link,
        List,
        MediaEmbed,
        Paragraph,
        PasteFromOffice,
        PictureEditing,
        Table,
        TableToolbar,
        TextTransformation
    ];

    static defaultConfig = {
        toolbar: {
            items: [
                'undo', 'redo',
                '|', 'heading',
                '|', 'bold', 'italic',
                '|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
                '|', 'bulletedList', 'numberedList', 'outdent', 'indent'
            ]
        },
        image: {
            toolbar: [
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side',
                '|',
                'toggleImageCaption',
                'imageTextAlternative'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        language: 'en'
    };
}

Editor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Superbuild

Please contact us if you require these features in the CDN distribution.

Before:

<script>
ClassicEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

After:

<script>
const {
    ClassicEditor: ClassicEditorBase,
    InlineEditor: InlineEditorBase,
    BalloonEditor: BalloonEditorBase,
    DecoupledEditor: DecoupledEditorBase,
    CKFinderUploadAdapter,
    Alignment,
    Autoformat,
    Bold,
    Italic,
    Underline,
    Strikethrough,
    Superscript,
    Subscript,
    Code,
    BlockQuote,
    CKBox,
    CKBoxImageEdit,
    CKFinder,
    CloudServices,
    CodeBlock,
    EasyImage,
    Essentials,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    AutoImage,
    ImageResize,
    ImageUpload,
    ImageInsert,
    PictureEditing,
    Indent,
    IndentBlock,
    TextPartLanguage,
    Link,
    AutoLink,
    LinkImage,
    List,
    ListProperties,
    TodoList,
    MediaEmbed,
    Paragraph,
    FindAndReplace,
    FontBackgroundColor,
    FontColor,
    FontFamily,
    FontSize,
    Highlight,
    HorizontalLine,
    HtmlEmbed,
    GeneralHtmlSupport,
    HtmlComment,
    Mention,
    PageBreak,
    PasteFromOffice,
    RemoveFormat,
    StandardEditingMode,
    ShowBlocks,
    Style,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersEssentials,
    Table,
    TableToolbar,
    TableCellProperties,
    TableProperties,
    TableCaption,
    TableColumnResize,
    TextTransformation,
    WordCount,
    Base64UploadAdapter
} = CKEDITOR;

const {
    AIAssistant,
    OpenAITextAdapter,
    CaseChange,
    Comments,
    ExportPdf,
    ExportWord,
    MultiLevelList,
    Pagination,
    RealTimeCollaborativeComments,
    RealTimeCollaborativeRevisionHistory,
    RealTimeCollaborativeTrackChanges,
    RevisionHistory,
    TrackChanges,
    TrackChangesData
} = CKEDITOR_PREMIUM_FEATURES;

class ClassicEditor extends ClassicEditorBase {}

class InlineEditor extends InlineEditorBase {}

class BalloonEditor extends BalloonEditorBase {}

class DecoupledEditor extends DecoupledEditorBase {}

for ( const Editor of [ ClassicEditor, InlineEditor, BalloonEditor, DecoupledEditor ] ) {
    // Plugins to include in the build.
    Editor.builtinPlugins = [
        AIAssistant, OpenAITextAdapter,
        Base64UploadAdapter,
        Alignment,
        Autoformat,
        Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Code,
        BlockQuote,
        CKBox, CKBoxImageEdit,
        CKFinder, CKFinderUploadAdapter,
        CloudServices,
        CodeBlock,
        Comments,
        EasyImage,
        Essentials,
        ExportPdf,
        ExportWord,
        Heading,
        Image, ImageCaption, ImageStyle, ImageToolbar, AutoImage, ImageResize, ImageUpload, ImageInsert, PictureEditing,
        Indent, IndentBlock,
        TextPartLanguage,
        Link, AutoLink, LinkImage,
        List, ListProperties, TodoList,
        MultiLevelList,
        MediaEmbed,
        Paragraph,
        FindAndReplace,
        FontBackgroundColor, FontColor, FontFamily, FontSize,
        Highlight,
        HorizontalLine,
        HtmlEmbed,
        GeneralHtmlSupport, HtmlComment,
        Mention,
        PageBreak,
        PasteFromOffice,
        Pagination,
        RealTimeCollaborativeComments, RealTimeCollaborativeRevisionHistory, RealTimeCollaborativeTrackChanges, PresenceList,
        RemoveFormat,
        RevisionHistory,
        StandardEditingMode,
        ShowBlocks,
        Style,
        SpecialCharacters, SpecialCharactersEssentials,
        Table, TableToolbar, TableCellProperties, TableProperties, TableCaption, TableColumnResize,
        TrackChanges, TrackChangesData,
        TextTransformation,
        WordCount,
        DocumentOutline, TableOfContents, FormatPainter, Template, SlashCommand, PasteFromOfficeEnhanced, CaseChange
    ];

    Editor.defaultConfig = {
        toolbar: [
            'aiCommands', 'aiAssistant',
            '|',
            // Productivity pack.
            'tableOfContents', 'formatPainter', 'insertTemplate', 'caseChange',
            '|',
            'pagination',
            '|',
            'trackChanges', 'revisionHistory', 'comment',
            '|',
            'heading', 'style',
            '|',
            'removeFormat', 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'link',
            '|',
            'highlight', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
            '|',
            'bulletedList', 'numberedList', 'multiLevelList', 'todoList',
            '|',
            'blockQuote', 'uploadImage', 'insertTable', 'mediaEmbed', 'codeBlock',
            '|',
            'htmlEmbed',
            '|',
            'alignment', 'outdent', 'indent',
            '|',
            'pageBreak', 'horizontalLine', 'specialCharacters',
            '|',
            'textPartLanguage',
            '|',
            'showBlocks',
            '|',
            'undo', 'redo', 'findAndReplace'
        ],
        table: {
            contentToolbar: [
                'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption'
            ]
        },
        image: {
            styles: [
                'alignCenter',
                'alignLeft',
                'alignRight'
            ],
            resizeOptions: [
                {
                    name: 'resizeImage:original',
                    label: 'Original size',
                    value: null
                },
                {
                    name: 'resizeImage:50',
                    label: '50%',
                    value: '50'
                },
                {
                    name: 'resizeImage:75',
                    label: '75%',
                    value: '75'
                }
            ],
            toolbar: [
                'imageTextAlternative', 'toggleImageCaption', '|',
                'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', 'imageStyle:side', '|',
                'resizeImage', '|',
                'ckboxImageEdit'
            ],
            insert: {
                integrations: [
                    'insertImageViaUrl'
                ]
            }
        },
        comments: {
            editorConfig: {
                extraPlugins: [ Bold, Italic, Underline, List ]
            }
        },
        placeholder: 'Type the content here!',
        language: 'en'
    };

    // Enable the `SourceEditing` plugin for ClassicEditor only.
    if ( Editor === ClassicEditor ) {
        Editor.builtinPlugins.push( SourceEditing );

        Editor.defaultConfig.toolbar.push( '|', 'sourceEditing' );
    }

    // Enable the `Pagination` plugin for DecoupledEditor only.
    if ( Editor === DecoupledEditor ) {
        Editor.builtinPlugins.push( Pagination );

        Editor.defaultConfig.toolbar.unshift( 'sourceEditing', '|' );

        Editor.defaultConfig.pagination = {
            // A4
            pageWidth: '21cm',
            pageHeight: '29.7cm',

            pageMargins: {
                top: '20mm',
                bottom: '20mm',
                right: '12mm',
                left: '12mm'
            }
        };
    }
}

ClassicEditor
    .create( /* Configuration */ )
    .catch( error => console.error( error ) );
</script>

Unlike when using predefined builds, you are now free to customize the editor by adding or removing plugins. However, before you do this, you should test the editor to make sure it works as expected.

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.