|
@@ -1,30 +1,30 @@
|
|
|
---
|
|
---
|
|
|
-menu-title: CSS Frameworks
|
|
|
|
|
|
|
+menu-title: CSS frameworks
|
|
|
category: builds-integration-frameworks
|
|
category: builds-integration-frameworks
|
|
|
order: 50
|
|
order: 50
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
-# Compatibility with CSS Frameworks
|
|
|
|
|
|
|
+# 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:
|
|
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 higher [CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/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 editor (e.g. link input).
|
|
|
|
|
|
|
+* CSS frameworks often use a higher [CSS Specificity](https://developer.mozilla.org/en-US/docs/Web/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 those integration issues and use the CKEditor 5 WYSIWYG editor with the most popular front–end frameworks.
|
|
|
|
|
|
|
+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
|
|
## Compatibility with Bootstrap
|
|
|
|
|
|
|
|
-We noticed that [Bootstrap](https://getbootstrap.com) 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:
|
|
|
|
|
|
|
+We noticed that [Bootstrap](https://getbootstrap.com) 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.
|
|
|
|
|
|
|
+* 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:
|
|
To address the first issue, add the following styles to your application:
|
|
|
|
|
|
|
|
```css
|
|
```css
|
|
|
/*
|
|
/*
|
|
|
- * Configure the z-index of the editor's UI, so when inside a Bootstrap
|
|
|
|
|
|
|
+ * Configure the z-index of the editor UI, so when inside a Bootstrap
|
|
|
* modal, it will be rendered over the modal.
|
|
* modal, it will be rendered over the modal.
|
|
|
*/
|
|
*/
|
|
|
:root {
|
|
:root {
|
|
@@ -33,7 +33,7 @@ To address the first issue, add the following styles to your application:
|
|
|
}
|
|
}
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-Pass the [`focus: false`](https://getbootstrap.com/docs/4.1/components/modal/#options) option to Bootstrap's `modal()` function to fix the second issue:
|
|
|
|
|
|
|
+Pass the [`focus: false`](https://getbootstrap.com/docs/4.1/components/modal/#options) option to Bootstrap `modal()` function to fix the second issue:
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
$( '#modal-container' ).modal( {
|
|
$( '#modal-container' ).modal( {
|
|
@@ -41,15 +41,15 @@ $( '#modal-container' ).modal( {
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-[Check out the demo](https://codepen.io/ckeditor/pen/vzvgOe).
|
|
|
|
|
|
|
+[Check out the demo of CKEditor 5 rich-text editor working correctly with Bootstrap](https://codepen.io/ckeditor/pen/vzvgOe).
|
|
|
|
|
|
|
|
## Compatibility with Foundation
|
|
## Compatibility with Foundation
|
|
|
|
|
|
|
|
-CKEditor 5 requires some minor adjustments to the `z-index` of the UI to work property with [Foundation](https://foundation.zurb.com/sites.html) (also with [Reveal](https://foundation.zurb.com/sites/docs/reveal.html) modal).
|
|
|
|
|
|
|
+CKEditor 5 requires some minor adjustments to the `z-index` of the UI to work properly with [Foundation](https://foundation.zurb.com/sites.html) (and with the [Reveal](https://foundation.zurb.com/sites/docs/reveal.html) modal, too).
|
|
|
|
|
|
|
|
```css
|
|
```css
|
|
|
/*
|
|
/*
|
|
|
- * Configure the z-index of the editor's UI, so when inside a Reveal modal,
|
|
|
|
|
|
|
+ * Configure the z-index of the editor UI, so when inside a Reveal modal,
|
|
|
* it will be rendered over the modal.
|
|
* it will be rendered over the modal.
|
|
|
*/
|
|
*/
|
|
|
:root {
|
|
:root {
|
|
@@ -58,22 +58,22 @@ CKEditor 5 requires some minor adjustments to the `z-index` of the UI to work pr
|
|
|
}
|
|
}
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-[Check out the demo](https://codepen.io/ckeditor/pen/VqXYQq).
|
|
|
|
|
|
|
+[Check out the demo of CKEditor 5 rich-text editor working correctly with Foundation](https://codepen.io/ckeditor/pen/VqXYQq).
|
|
|
|
|
|
|
|
## Compatibility with Materialize
|
|
## Compatibility with Materialize
|
|
|
|
|
|
|
|
If you want to use CKEditor 5 with [Materialize.css](https://materializecss.com/) you will need to take the following steps:
|
|
If you want to use CKEditor 5 with [Materialize.css](https://materializecss.com/) 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 higher specificity),
|
|
|
|
|
-* configure modals so they stop "stealing" the focus from the rich text editor input fields.
|
|
|
|
|
|
|
+* 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:
|
|
Use the following CSS to address the issues with the `z-index` and selector specificity:
|
|
|
|
|
|
|
|
```css
|
|
```css
|
|
|
/*
|
|
/*
|
|
|
- * Configure the z-index of the editor's UI, so when inside a Materialize modal,
|
|
|
|
|
- * it will be rendered over the modal.
|
|
|
|
|
|
|
+ * Configure the z-index of the editor UI, so when inside a Materialize
|
|
|
|
|
+ * modal, it will be rendered over the modal.
|
|
|
*/
|
|
*/
|
|
|
:root {
|
|
:root {
|
|
|
--ck-z-default: 100;
|
|
--ck-z-default: 100;
|
|
@@ -81,8 +81,8 @@ Use the following CSS to address the issues with the `z-index` and selector spec
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
/*
|
|
|
- * Bring back the default CKEditor 5 input appearance by overriding high–specificity styles
|
|
|
|
|
- * brought by materialize.css.
|
|
|
|
|
|
|
+ * 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
|
|
* See: https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/forms/_input-fields.scss#L10-L40
|
|
|
*/
|
|
*/
|
|
@@ -107,18 +107,18 @@ Use the following CSS to address the issues with the `z-index` and selector spec
|
|
|
}
|
|
}
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-To change the behavior of the modals and prevent them from "stealing" the focus, use [`dismissible: false`](https://materializecss.com/modals.html#options) option.
|
|
|
|
|
|
|
+To change the behavior of the modals and prevent them from "stealing" the focus, use the [`dismissible: false`](https://materializecss.com/modals.html#options) option.
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
M.Modal.init( modal, { dismissible: false } );
|
|
M.Modal.init( modal, { dismissible: false } );
|
|
|
|
|
|
|
|
-// Or "jQuery way".
|
|
|
|
|
|
|
+// Or "jQuery way":
|
|
|
$( '#modal-container' ).modal( {
|
|
$( '#modal-container' ).modal( {
|
|
|
dismissible: false
|
|
dismissible: false
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-[Check out the demo](https://codepen.io/ckeditor/pen/gZebwy).
|
|
|
|
|
|
|
+[Check out the demo of CKEditor 5 rich-text editor working correctly with Materialize.css](https://codepen.io/ckeditor/pen/gZebwy).
|
|
|
|
|
|
|
|
## Compatibility with Semantic-UI
|
|
## Compatibility with Semantic-UI
|
|
|
|
|
|
|
@@ -126,7 +126,7 @@ CKEditor 5 works properly with [Semantic-UI](https://semantic-ui.com/) after a s
|
|
|
|
|
|
|
|
```css
|
|
```css
|
|
|
/*
|
|
/*
|
|
|
- * Configure the z-index of the editor's UI, so when inside a Semantic-UI modal,
|
|
|
|
|
|
|
+ * Configure the z-index of the editor UI, so when inside a Semantic-UI modal,
|
|
|
* it will be rendered over the modal.
|
|
* it will be rendered over the modal.
|
|
|
*/
|
|
*/
|
|
|
:root {
|
|
:root {
|
|
@@ -135,4 +135,4 @@ CKEditor 5 works properly with [Semantic-UI](https://semantic-ui.com/) after a s
|
|
|
}
|
|
}
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-[Check out the demo](https://codepen.io/ckeditor/pen/OrZBpV).
|
|
|
|
|
|
|
+[Check out the demo of CKEditor 5 rich-text editor working correctly with Semantic-UI](https://codepen.io/ckeditor/pen/OrZBpV).
|