|
|
@@ -29,7 +29,7 @@ In your HTML page add an element that CKEditor should replace:
|
|
|
</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
|
|
|
ClassicEditor
|
|
|
@@ -54,7 +54,7 @@ Similarly to the previous example, add an element where CKEditor should initiali
|
|
|
</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
|
|
|
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">
|
|
|
+ <p>Here goes the initial content of the editor.</p>
|
|
|
+</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>
|
|
|
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.
|
|
|
|