menu-title: CSS Frameworks category: builds-integration-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:
z-index property and render over the UI of the editor,In this guide, you will learn how to address those integration issues and use the CKEditor 5 WYSIWYG editor with the most popular CSS frameworks.
We noticed that Bootstrap modals cover the UI of the 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:
z-index of CKEditor 5 floating balloons so they are displayed over the Bootstrap overlay,To address the first issue, add the following styles to your application:
/*
* Configure the z-index of the editor's 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's modal() function to fix the second issue:
$( '#modal-container' ).modal( {
focus: false
} );
CKEditor 5 requires some minor adjustments to the z-index of the UI to work property with Foundation (also with Reveal modal).
/*
* Configure the z-index of the editor's 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 );
}
If you want to use CKEditor 5 with Materialize.css you will need to take the following steps:
z-index of the UI so it is displayed over the Materialize modals,.ck-input class appearance (because Materialize overrides it with higher specificity),Use the following CSS to address the issues with the z-index and selector specificity:
/*
* Configure the z-index of the editor's 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 dismissible: false option.
M.Modal.init( modal, { dismissible: false } );
// Or "jQuery way".
$( '#modal-container' ).modal( {
dismissible: false
} );
CKEditor 5 works properly with Semantic-UI after a minor CSS tweak. To use the {@link builds/guides/overview#balloon-editor balloon editor} inside a modal, it is necessary to increase the z-index of the UI:
/*
* Configure the z-index of the editor's 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 );
}