Contribute to this guide

guideMigration to CKEditor 5 v30.0.0

When updating your CKEditor 5 installation, make sure all the packages are the same version to avoid errors.

For custom builds, you may try removing the package-lock.json or yarn.lock files (if applicable) and reinstalling all packages before rebuilding the editor. For best results, make sure you use the most recent package versions.

For the entire list of changes introduced in version 30.0.0, see the changelog for CKEditor 5 v30.0.0.

Listed below are the most important changes that require your attention when upgrading to CKEditor 5 v30.0.0.

# Viewport (toolbar) offset config change

Starting from v30.0.0, the EditorConfig#toolbar.viewportTopOffset config is deprecated.

The new EditorConfig#ui.viewportOffset editor config allows to set viewportOffset from every direction.

const config = {
    ui: {
        viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
    }
}

Here is the exact change you would need to introduce for proper integration with the new EditorConfig#ui.viewportOffset config change:

// Before v30.0.0
ClassicEditor
    .create( ..., {
        // ...
        toolbar: {
            items: [ ... ],
            viewportTopOffset: 100
        }
    } )

// Since v30.0.0
ClassicEditor
    .create( ..., {
        // ...
        toolbar: {
            items: [ ... ]
        },
        ui: {
            viewportOffset: {
                top: 100
            }
        }
    } )