瀏覽代碼

Docs: Added example how to create Balloon editor. [skip ci]

Wiktor Walc 8 年之前
父節點
當前提交
fcac189863
共有 1 個文件被更改,包括 27 次插入2 次删除
  1. 27 2
      docs/builds/guides/integration/basic-api.md

+ 27 - 2
docs/builds/guides/integration/basic-api.md

@@ -29,7 +29,7 @@ In your HTML page add an element that CKEditor should replace:
 </textarea>
 </textarea>
 ```
 ```
 
 
-Then call {@link module:editor-classic/classiceditor~ClassicEditor#create `ClassicEditor.create()`} to replace `<textarea>` with a {@link builds/guides/overview#Classic-editor Classic editor}:
+Then call {@link module:editor-classic/classiceditor~ClassicEditor#create `ClassicEditor.create()`} to **replace** `<textarea>` with a {@link builds/guides/overview#Classic-editor Classic editor}:
 
 
 ```js
 ```js
 ClassicEditor
 ClassicEditor
@@ -54,7 +54,7 @@ Similarly to the previous example, add an element where CKEditor should initiali
 </div>
 </div>
 ```
 ```
 
 
-Then call {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} to attach {@link builds/guides/overview#Inline-editor Inline editor} to a `<div>` element:
+Then call {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} to **attach** {@link builds/guides/overview#Inline-editor Inline editor} to a `<div>` element:
 
 
 ```js
 ```js
 InlineEditor
 InlineEditor
@@ -67,6 +67,31 @@ InlineEditor
 	} );
 	} );
 ```
 ```
 
 
+### Example – Balloon editor
+
+The procedure is the same as for Inline editor, the only difference is that we will use {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`}.
+
+Add an element where CKEditor should initialize (as with ):
+
+```html
+<div id="editor">
+	&lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt;
+</div>
+```
+
+Then call {@link module:editor-balloon/ballooneditor~BalloonEditor#create `BalloonEditor.create()`} to **attach** {@link builds/guides/overview#Balloon-editor Balloon editor} to a `<div>` element:
+
+```js
+BalloonEditor
+	.create( document.querySelector( '#editor' ) )
+	.then( editor => {
+		console.log( editor );
+	} )
+	.catch( error => {
+		console.error( error );
+	} );
+```
+
 <info-box tip>
 <info-box tip>
 	Every editor class may accept different parameters in the `create()` method and may handle initialization differently. For instance, the classic editor will replace a given element with an editor, while the inline editor will use the given element to initialize the editor on it. See each editor's documentation to learn the details.
 	Every editor class may accept different parameters in the `create()` method and may handle initialization differently. For instance, the classic editor will replace a given element with an editor, while the inline editor will use the given element to initialize the editor on it. See each editor's documentation to learn the details.