Compatibility with CSS frameworks

CKEditor 5 is compatible with most of the popular CSS frameworks. However, to properly integrate with some of them, additional tweaks may be necessary. This is mostly due to the fact that:

• CSS frameworks often use a higher CSS Specificity in their style sheets and override default editor styles, distorting the user interface.
• Modal components of various UI frameworks use high z-index values in their styles and render over (cover) the UI of CKEditor 5.
• Framework modals use aggressive focus management policy which breaks the input fields in the rich-text editor (e.g. the link input).

In this guide, you will learn how to address these integration issues and use the CKEditor 5 WYSIWYG editor with the most popular front–end frameworks.

# Compatibility with Bootstrap

We noticed that Bootstrap modals cover the UI of the rich-text editor and break the input fields. Knowing that, you will need to take the following steps to get CKEditor 5 working in the Bootstrap environment:

• Configure the z-index of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay.
• Configure Bootstrap so it stops “stealing” the focus from the rich-text editor input fields.

To address the first issue, add the following styles to your application:

/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

Pass the focus: false option to Bootstrap modal() function to fix the second issue:

$( '#modal-container' ).modal( {
    focus: false
} );

Check out the demo of CKEditor 5 rich-text editor working correctly with Bootstrap.

# Compatibility with Foundation

CKEditor 5 requires some minor adjustments to the z-index of the UI to work properly with Foundation (and with the Reveal modal, too).

/*
 * Configure the z-index of the editor UI, so when inside a Reveal modal,
 * it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

Check out the demo of CKEditor 5 rich-text editor working correctly with Foundation.

# Compatibility with Materialize

If you want to use CKEditor 5 with Materialize.css you will need to take the following steps:

• Configure the base z-index of the floating editor UI so it is displayed over the Materialize modals.
• Bring back the default .ck-input class appearance (because Materialize overrides it with a higher specificity).
• Configure modals so they stop “stealing” the focus from the rich-text editor input fields.

Use the following CSS to address the issues with the z-index and selector specificity:

/*
 * Configure the z-index of the editor UI, so when inside a Materialize
 * modal, it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

/*
 * Bring back the default CKEditor 5 input appearance by overriding
 * high–specificity styles brought by materialize.css.
 *
 * See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/forms/_input-fields.scss#L10-L40
 */
.ck input.ck-input.ck-input-text {
    box-shadow: var(--ck-inner-shadow),0 0;
    background: var(--ck-color-input-background);
    border: 1px solid var(--ck-color-input-border);
    padding: var(--ck-spacing-extra-tiny) var(--ck-spacing-medium);
    transition-property: box-shadow,border;
    transition: .2s ease-in-out;

    height: inherit;
    width: inherit;
    font-size: inherit;
    margin: 0;
    box-sizing: border-box;
}

.ck input.ck-input.ck-input-text:focus {
    border: var(--ck-focus-ring);
    box-shadow: var(--ck-focus-outer-shadow),var(--ck-inner-shadow);
}

To change the behavior of the modals and prevent them from “stealing” the focus, use the dismissible: false option.

M.Modal.init( modal, { dismissible: false } );

// Or "jQuery way":
$( '#modal-container' ).modal( {
    dismissible: false
} );

Check out the demo of CKEditor 5 rich-text editor working correctly with Materialize.css.

# Compatibility with Semantic-UI

CKEditor 5 works properly with Semantic-UI after a small CSS tweak. To use the balloon editor inside a modal, it is necessary to configure the z-index property of the floating editor UI to make it render over the modal:

/*
 * Configure the z-index of the editor UI, so when inside a Semantic-UI modal,
 * it will be rendered over the modal.
 */
:root {
    --ck-z-default: 100;
    --ck-z-modal: calc( var(--ck-z-default) + 999 );
}

Check out the demo of CKEditor 5 rich-text editor working correctly with Semantic-UI.