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 values in their styles and render over (cover) the UI of CKEditor 5.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.
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:
z-index of the floating editor UI (e.g. balloons) so it is displayed over the Bootstrap overlay.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.
There is also a known issue concerning table styles brought by Bootstrap breaking the table (widget) layout during editing. If you do not want any additional space around edited tables when using Bootstrap, add the following styles to your application:
/*
* Override the width of the table set by Bootstrap content styles.
* See: https://github.com/ckeditor/ckeditor5-table/issues/154.
*/
.ck-content .table {
width: auto;
}
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.
If you want to use CKEditor 5 with Materialize.css you will need to take the following steps:
z-index of the floating editor UI so it is displayed over the Materialize modals..ck-input class appearance (because Materialize overrides it with a higher specificity).<ul> and <li> appearance (because Materialize overrides it).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);
}
/*
* Bring back the default <ul> and <li> appearance.
*
* See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_global.scss#L28-L37
*/
.ck.ck-content ul,
.ck.ck-content ul li {
list-style-type: inherit;
}
.ck.ck-content ul {
/* Default user agent stylesheet, you can change it to your needs. */
padding-left: 40px;
}
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.
CKEditor 5 works properly with Semantic-UI after a small CSS tweak. To use the {@link builds/guides/overview#balloon-editor 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.