Przeglądaj źródła

Merge pull request #1444 from ckeditor/t/1421

Docs: Introduced the "Compatibility with CSS Frameworks" guide. Closes #1421.
Aleksander Nowodzinski 7 lat temu
rodzic
commit
ef2a854595

+ 138 - 0
docs/builds/guides/frameworks/css.md

@@ -0,0 +1,138 @@
+---
+menu-title: CSS Frameworks
+category: builds-integration-frameworks
+order: 50
+---
+
+# 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 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).
+
+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.
+
+## 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:
+
+* 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:
+
+```css
+/*
+ * 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`](https://getbootstrap.com/docs/4.1/components/modal/#options) option to Bootstrap's `modal()` function to fix the second issue:
+
+```js
+$( '#modal-container' ).modal( {
+	focus: false
+} );
+```
+
+[Check out the demo](https://codepen.io/ckeditor/pen/vzvgOe).
+
+## 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).
+
+```css
+/*
+ * 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 );
+}
+```
+
+[Check out the demo](https://codepen.io/ckeditor/pen/VqXYQq).
+
+## Compatibility with Materialize
+
+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.
+
+Use the following CSS to address the issues with the `z-index` and selector specificity:
+
+```css
+/*
+ * 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`](https://materializecss.com/modals.html#options) option.
+
+```js
+M.Modal.init( modal, { dismissible: false } );
+
+// Or "jQuery way".
+$( '#modal-container' ).modal( {
+	dismissible: false
+} );
+```
+
+[Check out the demo](https://codepen.io/ckeditor/pen/gZebwy).
+
+## Compatibility with Semantic-UI
+
+CKEditor 5 works properly with [Semantic-UI](https://semantic-ui.com/) 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:
+
+```css
+/*
+ * 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 );
+}
+```
+
+[Check out the demo](https://codepen.io/ckeditor/pen/OrZBpV).

+ 0 - 30
docs/builds/guides/frameworks/overview.md

@@ -41,33 +41,3 @@ We plan to provide more integrations with time. We would like to [hear your idea
 Starting from version 11.0.0 CKEditor 5 is compatible with Electron. Using CKEditor 5 in Electron applications does not require any additional steps.
 
 Check out a [sweet screencast of CKEditor 5 with real-time collaborative editing in Electron](https://twitter.com/ckeditor/status/1016627687568363520).
-
-## Compatibility with Bootstrap
-
-In order to display CKEditor 5 inside [Bootstrap](https://getbootstrap.com/) modals you need to proceed as follows:
-
-* Configure the `z-index` of CKEditor 5 floating balloons so they are displayed above the Bootstrap overlay.
-* Configure Bootstrap to not steal focus from rich text editor fields.
-
-The above can be ensured by adding this CSS:
-
-```css
-/*
-	You need to add this custom CSS property to the body instead of :root
-	because of CSS specificity.
-*/
-body {
-	--ck-z-default: 100;
-	--ck-z-modal: calc( var(--ck-z-default) + 999 );
-}
-```
-
-And passing the [`focus: false`](https://getbootstrap.com/docs/4.1/components/modal/#options) option to Boostrap's `modal()` function:
-
-```js
-$( '#modal-container' ).modal( {
-	focus: false
-} );
-```
-
-Check out the demo on https://codepen.io/ckeditor/pen/vzvgOe.