Sign up (with export icon)

Migrating from predefined builds

Contribute to this guide Show the table of contents

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

Copy link

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

Copy link

npm

Copy link

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

  1. 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
    Copy code

  2. Next, install the ckeditor5 package. This package contains the editor and all of our open-source plugins.

    npm install ckeditor5
    Copy code

  3. (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
    Copy code

  4. 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 ) );
    Copy code

    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 ) );
    Copy code
    Inline editor

    Before:

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

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

    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 ) );
    Copy code
    Balloon editor

    Before:

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

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

    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 ) );
    Copy code
    Balloon block editor

    Before:

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

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

    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 ) );
    Copy code
    Decoupled document editor

    Before:

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

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

    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 ) );
    Copy code
    Multi-root editor

    Before:

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

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

    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 ) );
    Copy code

  5. 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

Copy link

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

Copy link

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.

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

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

  2. 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/46.1.0/ckeditor5.css" />

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

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

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

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

  3. 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>
    Copy code

    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>
    Copy code
    Inline editor

    Before:

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

    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>
    Copy code
    Balloon editor

    Before:

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

    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>
    Copy code
    Balloon block editor

    Before:

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

    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>
    Copy code
    Decoupled document editor

    Before:

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

    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>
    Copy code
    Multi-root editor

    Before:

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

    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>
    Copy code
    Superbuild

    Before:

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

    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',
            '|',
            '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>
    Copy code

  4. 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

Copy link

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

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

  2. 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/46.1.0/ckeditor5.css" />
<script src="https://cdn.ckeditor.com/ckeditor5/46.1.0/ckeditor5.umd.js"></script>
    Copy code

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

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

  3. 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>
    Copy code

    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>
    Copy code
    Inline editor

    Before:

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

    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>
    Copy code
    Balloon editor

    Before:

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

    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>
    Copy code
    Balloon block editor

    Before:

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

    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>
    Copy code
    Decoupled document editor

    Before:

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

    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>
    Copy code
    Multi-root editor

    Before:

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

    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>
    Copy code
    Superbuild

    Before:

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

    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>
    Copy code

  4. 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.

Was this page helpful?

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.

GitHubSupportContact Us

© 2003 - 2025  CKSource. All rights reserved.