CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Updating

guideUpdate to CKEditor 5 v39.x

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.

# Update to CKEditor 5 v39.0.0

Released on August 2, 2023.

For the entire list of changes introduced in version 39.0.0, see the release notes for CKEditor 5 v39.0.0.

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

# Introduction of color pickers to table and table cell properties features

Starting with CKEditor 5 v39.0.0, the table styling tools will display a color picker in their user interfaces for color-related tools.

Just like with the introduction of color pickers to font color and font background color features, you can decide whether this new functionality works for your integration and to opt out of it.

You can set the colorPicker and colorPicker configuration options to false to get rid of color pickers in all table styling tools:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        table: {
            /* ... */

            tableProperties: {
                // Disable the color picker for the table properties feature.
                colorPicker: false
            },

            tableCellProperties: {
                // Disable the color picker for the table cell properties feature.
                colorPicker: false
            }
        }
        toolbar: [
            'heading', 'bulletedList', 'numberedList', 'fontColor', 'fontBackgroundColor', 'insertTable', 'undo', 'redo'
        ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# Adjusting to changes in the ckeditor5-cbox package

# CKBox library dependency

The @ckeditor/ckeditor5-cbox package now solely operates with the CKBox library version 2.0.0 or higher. Ensure you have the following script tag set in your HTML to load the correct version:

<script src="https://cdn.ckbox.io/CKBox/2.0.0/ckbox.js"></script>

# On-premises CKBox backend adjustments

The CKBox backend was released in version 2.0.0. Users operating the on-premises version of the CKBox backend need to update to this version to ensure compatibility.

Moreover, the editor configuration parameter ckbox.assetsOrigin, commonly used with the on-premises version, is no longer necessary. This is because the plugin no longer constructs asset URLs on its own but instead uses those provided directly by the backend. You should remove the ckbox.assetsOrigin parameter from your editor configuration.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        /* ... */

        // CKBox configuration parameters.
        ckbox: {
            serviceOrigin: 'https://your-service-origin.com',

            // This parameter is no longer needed and should be removed.
            assetsOrigin: 'https://your-assets-origin.com'
        }
    } )

# View element placeholder

The enablePlaceholder() function no longer gets placeholder content as a text property of the options argument. To define a value of the placeholder, you need to specify it as a placeholder property of the element which is passed into the options object.

element.placeholder = 'Type something…';

enablePlaceholder( {
    view: editingView,
    element: element,
    isDirectHost: false,
    keepOnFocus: true
} );