8
0
Просмотр исходного кода

Docs: Document editor added to Basic API guide. [skip ci]

Anna Tomanek 7 лет назад
Родитель
Сommit
27534138de
1 измененных файлов с 30 добавлено и 0 удалено
  1. 30 0
      docs/builds/guides/integration/basic-api.md

+ 30 - 0
docs/builds/guides/integration/basic-api.md

@@ -13,6 +13,7 @@ Each CKEditor 5 build provides a different class that handles the creation of ed
 * Classic editor – {@link module:editor-classic/classiceditor~ClassicEditor}
 * Inline editor – {@link module:editor-inline/inlineeditor~InlineEditor}
 * Balloon editor – {@link module:editor-balloon/ballooneditor~BalloonEditor}
+* Document editor – {@link module:editor-decoupled/decouplededitor~DecoupledEditor}
 
 Most of the examples in the documentation use the `ClassicEditor` class, but things should work in a similar way with other builds.
 
@@ -93,6 +94,35 @@ BalloonEditor
 	} );
 ```
 
+### Example – Document editor
+
+Add the elements where CKEditor should initialize the toolbar and the editable to your page:
+
+```html
+<!-- The toolbar will be rendered in this container. -->
+<div id="toolbar-container"></div>
+
+<!-- This container will become the editable. -->
+<div id="editor">
+	<p>This is the initial editor content.</p>
+</div>
+```
+
+Then call {@link module:editor-decoupled/decouplededitor~DecoupledEditor#create `DecoupledEditor.create()`} method to create a decoupled editor instance with the toolbar and the editable in two separate containers:
+
+```js
+DecoupledEditor
+	.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		const toolbarContainer = document.querySelector( '#toolbar-container' );
+
+		toolbarContainer.appendChild( editor.ui.view.toolbar.element );
+	} )
+	.catch( error => {
+		console.error( error );
+	} );
+```
+
 <info-box tip>
 	Every editor class may accept different parameters in the `create()` method and may handle the initialization differently. For instance, classic editor will replace the given element with an editor, while inline editor will use the given element to initialize an editor on it. See each editor's documentation to learn the details.