|
|
@@ -8,32 +8,39 @@ order: 30
|
|
|
---
|
|
|
|
|
|
Creating an editor using a CKEditor 5 build is very simple and can be described in two steps:
|
|
|
-
|
|
|
+
|
|
|
1. Load the desired editor via the `<script>` tag.
|
|
|
-2. Call the static `create` method to create the editor.
|
|
|
+2. Call the static `create()` method to create the editor.
|
|
|
|
|
|
## Classic editor
|
|
|
|
|
|
In your HTML page add an element that CKEditor should replace:
|
|
|
-```
|
|
|
-<textarea name="editor1" id="text-editor"></textarea>
|
|
|
+
|
|
|
+```html
|
|
|
+<textarea name="editor1" id="editor"></textarea>
|
|
|
```
|
|
|
|
|
|
Load CKEditor 5, the classic editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
|
|
|
-```
|
|
|
+
|
|
|
+```html
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-classic/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
```
|
|
|
|
|
|
Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `ClassicEditor.create()`} method.
|
|
|
-```
|
|
|
+
|
|
|
+```js
|
|
|
<script>
|
|
|
- ClassicEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
+ ClassicEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
### Example
|
|
|
|
|
|
-```
|
|
|
+```html
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
@@ -42,11 +49,15 @@ Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `Classi
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-classic/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<h1>Classic editor</h1>
|
|
|
-<textarea name="editor1" id="text-editor"></textarea>
|
|
|
-<script>
|
|
|
- ClassicEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
-</script>
|
|
|
+ <h1>Classic editor</h1>
|
|
|
+ <textarea name="editor1" id="editor"><p>This is some sample content.</p></textarea>
|
|
|
+ <script>
|
|
|
+ ClassicEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
@@ -54,25 +65,32 @@ Call the {@link module:editor-classic/classiceditor~ClassicEditor#create `Classi
|
|
|
## Inline editor
|
|
|
|
|
|
In your HTML page add an element that CKEditor should make editable:
|
|
|
-```
|
|
|
-<div id="text-editor"></div>
|
|
|
+
|
|
|
+```html
|
|
|
+<div id="editor"></div>
|
|
|
```
|
|
|
|
|
|
Load CKEditor 5, the inline editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
|
|
|
-```
|
|
|
+
|
|
|
+```html
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-inline/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
```
|
|
|
|
|
|
Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEditor.create()`} method.
|
|
|
-```
|
|
|
+
|
|
|
+```html
|
|
|
<script>
|
|
|
- InlineEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
+ InlineEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
### Example
|
|
|
|
|
|
-```
|
|
|
+```html
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
@@ -81,11 +99,15 @@ Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEdi
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-inline/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<h1>Inline editor</h1>
|
|
|
-<div id="text-editor">This is some sample content.</div>
|
|
|
-<script>
|
|
|
- InlineEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
-</script>
|
|
|
+ <h1>Inline editor</h1>
|
|
|
+ <div id="editor"><p>This is some sample content.</p></div>
|
|
|
+ <script>
|
|
|
+ InlineEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
@@ -93,42 +115,53 @@ Call the {@link module:editor-inline/inlineeditor~InlineEditor#create `InlineEdi
|
|
|
## Balloon toolbar editor
|
|
|
|
|
|
In your HTML page add an element that CKEditor should make editable:
|
|
|
-```
|
|
|
-<div id="text-editor"></div>
|
|
|
+
|
|
|
+```html
|
|
|
+<div id="editor"></div>
|
|
|
```
|
|
|
|
|
|
Load CKEditor 5, the balloon toolbar editor build (here [CDN](https://cdn.ckeditor.com/) location is used):
|
|
|
-```
|
|
|
+
|
|
|
+```html
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
```
|
|
|
|
|
|
Call the {@link module:editor-balloon-toolbar/balloontoolbareditor~BalloonToolbarEditor#create `BalloonToolbarEditor.create()`} method.
|
|
|
-```
|
|
|
+
|
|
|
+```html
|
|
|
<script>
|
|
|
- BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
+ BalloonToolbarEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
### Example
|
|
|
|
|
|
-```
|
|
|
+```html
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
- <title>CKEditor 5 - Balloon toolbar editor</title>
|
|
|
+ <title>CKEditor 5 – Balloon toolbar editor</title>
|
|
|
<script src="https://cdn.ckeditor.com/ckeditor5-build-balloon-toolbar/{@var ckeditor5-version}/build/ckeditor.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<h1>Balloon toolbar editor</h1>
|
|
|
-<div id="text-editor">This is some sample content.</div>
|
|
|
-<script>
|
|
|
- BalloonToolbarEditor.create( document.querySelector( '#text-editor' ) );
|
|
|
-</script>
|
|
|
+ <h1>Balloon toolbar editor</h1>
|
|
|
+ <div id="editor"><p>This is some sample content.</p></div>
|
|
|
+ <script>
|
|
|
+ BalloonToolbarEditor
|
|
|
+ .create( document.querySelector( '#editor' ) )
|
|
|
+ .catch( error => {
|
|
|
+ console.error( error );
|
|
|
+ } );
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
## Next steps
|
|
|
|
|
|
-Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor, e.g. change the default toolbar.
|
|
|
+Check the {@link builds/guides/integration/configuration Configuration guide} to learn how to configure the editor – e.g. change the default toolbar.
|