|
|
@@ -31,7 +31,7 @@ Now, you need to enable CKEditor component in your application. There are 2 ways
|
|
|
* [via a direct script include](#direct-script-include),
|
|
|
* [by using ES6 module imports](#using-es6-modules).
|
|
|
|
|
|
-Optionally, you can [configure the component locally](#using-the-component-locally).
|
|
|
+Optionally, you can [use the component locally](#using-component-locally).
|
|
|
|
|
|
### Direct script include
|
|
|
|
|
|
@@ -42,22 +42,14 @@ This is the quickest way to start using CKEditor in your project. Assuming [Vue
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>
|
|
|
```
|
|
|
|
|
|
-Enable the component in your application using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method, specifying the editor build you want to use:
|
|
|
+Enable the component in your application using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method:
|
|
|
|
|
|
```js
|
|
|
-Vue.use( CKEditor, {
|
|
|
- editors: {
|
|
|
- classic: ClassicEditor
|
|
|
- }
|
|
|
-} );
|
|
|
+Vue.use( CKEditor );
|
|
|
```
|
|
|
|
|
|
<info-box>
|
|
|
- Check out the [component configuration](#component-configuration) section to learn more about the available options.
|
|
|
-</info-box>
|
|
|
-
|
|
|
-<info-box>
|
|
|
- You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
|
|
|
+ Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
|
|
|
</info-box>
|
|
|
|
|
|
Use the `<ckeditor>` component in your template:
|
|
|
@@ -68,7 +60,7 @@ Use the `<ckeditor>` component in your template:
|
|
|
|
|
|
```html
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
</div>
|
|
|
```
|
|
|
|
|
|
@@ -76,6 +68,7 @@ Use the `<ckeditor>` component in your template:
|
|
|
const app = new Vue( {
|
|
|
el: '#app',
|
|
|
data: {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
editorConfig: {
|
|
|
// Configuration of the editor.
|
|
|
@@ -94,46 +87,40 @@ Voila! You should see CKEditor 5 running in your Vue.js app.
|
|
|
|
|
|
The editor component comes as a [UMD module](https://github.com/umdjs/umd), which makes it possible to use in various environments, for instance, applications generated by [Vue CLI 3](https://cli.vuejs.org/), built using [webpack](https://webpack.js.org), etc..
|
|
|
|
|
|
-To create an editor instance, you must first import the editor build and the component modules into the root file of your application (e.g. `main.js` when generated by Vue CLI). Then, enable the component using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method, specifying the editor builds you want to use:
|
|
|
+To create an editor instance, you must first import the editor build and the component modules into the root file of your application (e.g. `main.js` when generated by Vue CLI). Then, enable the component using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method:
|
|
|
|
|
|
```js
|
|
|
import Vue from 'vue';
|
|
|
import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
|
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
|
-Vue.use( CKEditor, {
|
|
|
- editors: {
|
|
|
- classic: ClassicEditor
|
|
|
- }
|
|
|
-} );
|
|
|
+Vue.use( CKEditor );
|
|
|
```
|
|
|
|
|
|
<info-box>
|
|
|
- Check out the [component configuration](#component-configuration) section to learn more.
|
|
|
-</info-box>
|
|
|
-
|
|
|
-<info-box>
|
|
|
- You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
|
|
|
+ Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
|
|
|
</info-box>
|
|
|
|
|
|
The following example showcases a single–file component of the application. Use the `<ckeditor>` component in your template:
|
|
|
|
|
|
-* The [`editor`](#editor) directive specifies the editor build.
|
|
|
+* The [`editor`](#editor) directive specifies the editor build (the editor constructor).
|
|
|
* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
|
* The [`config`](#config) directive helps you pass the configuration to the editor instance.
|
|
|
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
editorConfig: {
|
|
|
// Configuration of the editor.
|
|
|
@@ -148,55 +135,18 @@ The following example showcases a single–file component of the application. Us
|
|
|
See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
|
|
|
</info-box>
|
|
|
|
|
|
-## Using the component locally
|
|
|
-
|
|
|
-### Local configuration
|
|
|
+## Using component locally
|
|
|
|
|
|
-If a per–view editor configuration is what suits you best, you can skip the [`editors`](#editors) option in `Vue.use()` when enabling the component.
|
|
|
+If you do not want the CKEditor component to be enabled globally, you can entirely skip the `Vue.use( CKEditor )` part. Instead, configure it in the `components` property of your view.
|
|
|
|
|
|
<info-box>
|
|
|
Make sure `CKEditor` and `ClassicEditor` are accessible depending on the integration scenario: as [direct script includes](#direct-script-include) or [ES6 module imports](#using-es6-modules).
|
|
|
</info-box>
|
|
|
|
|
|
-```js
|
|
|
-Vue.use( CKEditor );
|
|
|
-```
|
|
|
-
|
|
|
-and then pass the editor of your choice in the [`editor`](#editor) directive:
|
|
|
-
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor :editor="editorType" ... ></ckeditor>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- name: 'app',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- editorType: ClassicEditor,
|
|
|
-
|
|
|
- // ...
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-```
|
|
|
-
|
|
|
-### Local component registration
|
|
|
-
|
|
|
-If you do not want the CKEditor component to be enabled globally, you can entirely skip the `Vue.use( CKEditor, { ... } )` part. Instead, configure it in the `components` property of your view.
|
|
|
-
|
|
|
-<info-box>
|
|
|
- Make sure `CKEditor` and `ClassicEditor` are accessible depending on the integration scenario: as [direct script includes](#direct-script-include) or [ES6 module imports](#using-es6-modules).
|
|
|
-</info-box>
|
|
|
-
|
|
|
-```html
|
|
|
-<template>
|
|
|
- <div id="app">
|
|
|
- <ckeditor :editor="editorType" ... ></ckeditor>
|
|
|
+ <ckeditor :editor="editor" ... ></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -204,12 +154,12 @@ If you do not want the CKEditor component to be enabled globally, you can entire
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
components: {
|
|
|
- // Use the CKEditor component in this view.
|
|
|
+ // Use the <ckeditor> component in this view.
|
|
|
ckeditor: CKEditor.component
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- editorType: ClassicEditor,
|
|
|
+ editor: ClassicEditor,
|
|
|
|
|
|
// ...
|
|
|
};
|
|
|
@@ -307,34 +257,28 @@ npm install --save \
|
|
|
|
|
|
You can use more packages, depending on which features are needed in your application.
|
|
|
|
|
|
-Make sure your editor is [available to the component](#editors) (e.g. in `main.js`):
|
|
|
-
|
|
|
```js
|
|
|
import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
|
|
|
|
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
|
|
|
-
|
|
|
-Vue.use( CKEditor, {
|
|
|
- editors: {
|
|
|
- classic: ClassicEditor
|
|
|
- }
|
|
|
-} );
|
|
|
+Vue.use( CKEditor );
|
|
|
```
|
|
|
|
|
|
<info-box>
|
|
|
- You can always configure the component locally if you do not want to [specify the editors](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
|
|
|
+ Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
|
|
|
</info-box>
|
|
|
|
|
|
-Now all you need to do is specify `classic` in the [`editor`](#editor) directive and the list of editor options (**including plugins**) in the `editorConfig` data property:
|
|
|
+Now all you need to do is specify the list of editor options (**including plugins**) in the `editorConfig` data property:
|
|
|
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
|
|
|
+
|
|
|
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
|
|
|
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
|
|
|
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
|
|
|
@@ -345,6 +289,7 @@ Now all you need to do is specify `classic` in the [`editor`](#editor) directive
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
editorConfig: {
|
|
|
plugins: [
|
|
|
@@ -371,102 +316,34 @@ Now all you need to do is specify `classic` in the [`editor`](#editor) directive
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
-## Component configuration
|
|
|
-
|
|
|
-<info-box>
|
|
|
- You can entirely skip the configuration part if you decide to [configure the component locally](#using-the-component-locally).
|
|
|
-</info-box>
|
|
|
-
|
|
|
-### `editors`
|
|
|
-
|
|
|
-This configuration specifies editors available to the component. You can use {@link builds/guides/overview ready-to-use builds} or [editors from source](#using-ckeditor-from-source):
|
|
|
-
|
|
|
-```js
|
|
|
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
-
|
|
|
-Vue.use( CKEditor, {
|
|
|
- editors: {
|
|
|
- classic: ClassicEditor,
|
|
|
-
|
|
|
- // ...
|
|
|
- }
|
|
|
-} );
|
|
|
-```
|
|
|
-
|
|
|
-Use the [name of the editor](#editor) in your template to create the editor instance of your choice:
|
|
|
-
|
|
|
-```html
|
|
|
-<ckeditor editor="classic"></ckeditor>
|
|
|
-```
|
|
|
-
|
|
|
-<info-box>
|
|
|
- To use more than one rich text editor build in your application, you will need to configure it [from source](#using-ckeditor-from-source) or use a {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}.
|
|
|
-</info-box>
|
|
|
-
|
|
|
-<info-box>
|
|
|
- You can skip this configuration and [pass the editor directly](#local-configuration) in the [`editor`](#editor) directive.
|
|
|
-</info-box>
|
|
|
-
|
|
|
-### `componentName`
|
|
|
-
|
|
|
-You can change the name of the CKEditor component using the `componentName` property (by default `<ckeditor>`):
|
|
|
-
|
|
|
-```js
|
|
|
-Vue.use( CKEditor, {
|
|
|
- componentName: 'myEditor'
|
|
|
-} );
|
|
|
-```
|
|
|
-
|
|
|
-Use the new component name in the template to create editor instances:
|
|
|
-
|
|
|
-```html
|
|
|
-<myEditor editor="classic"></myEditor>
|
|
|
-```
|
|
|
-
|
|
|
## Component directives
|
|
|
|
|
|
### `editor`
|
|
|
|
|
|
-This directive specifies the editor to be used by the component. It should either:
|
|
|
+This directive specifies the editor to be used by the component. It must directly reference the editor constructor to be used in the template.
|
|
|
+
|
|
|
+```html
|
|
|
+<template>
|
|
|
+ <div id="app">
|
|
|
+ <ckeditor :editor="editor" ... ></ckeditor>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
|
|
|
-* correspond to one of [registered editors](#editors):
|
|
|
- ```js
|
|
|
+<script>
|
|
|
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
|
- Vue.use( CKEditor, {
|
|
|
- editors: {
|
|
|
- classic: ClassicEditor,
|
|
|
+ export default {
|
|
|
+ name: 'app',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ editor: ClassicEditor,
|
|
|
|
|
|
- // ...
|
|
|
- }
|
|
|
- } );
|
|
|
- ```
|
|
|
-
|
|
|
- ```html
|
|
|
- <ckeditor editor="classic"></ckeditor>
|
|
|
- ```
|
|
|
-
|
|
|
-* [directly reference](#local-configuration) the editor to be used in the template:
|
|
|
- ```html
|
|
|
- <template>
|
|
|
- <div id="app">
|
|
|
- <ckeditor :editor="editorType" ... ></ckeditor>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
- name: 'app',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- editorType: ClassicEditor,
|
|
|
-
|
|
|
- // ...
|
|
|
- };
|
|
|
- }
|
|
|
+ // ...
|
|
|
+ };
|
|
|
}
|
|
|
- </script>
|
|
|
- ```
|
|
|
+ }
|
|
|
+</script>
|
|
|
+```
|
|
|
|
|
|
<info-box>
|
|
|
To use more than one rich text editor build in your application, you will need to configure it [from source](#using-ckeditor-from-source) or use a {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}.
|
|
|
@@ -474,10 +351,10 @@ This directive specifies the editor to be used by the component. It should eithe
|
|
|
|
|
|
### `tag-name`
|
|
|
|
|
|
-By default, the editor component creates a `<div>` container which is used as an element passed tothe editor (e.g. {@link module:editor-classic/classiceditor~ClassicEditor#element `ClassicEditor#element`}). The element can be configured, e.g. to create a `<textarea>` use the following directive:
|
|
|
+By default, the editor component creates a `<div>` container which is used as an element passed to the editor (e.g. {@link module:editor-classic/classiceditor~ClassicEditor#element `ClassicEditor#element`}). The element can be configured, e.g. to create a `<textarea>` use the following directive:
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" tag-name="textarea"></ckeditor>
|
|
|
+<ckeditor :editor="editor" tag-name="textarea"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `v-model`
|
|
|
@@ -491,7 +368,7 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" v-model="editorData"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" v-model="editorData"></ckeditor>
|
|
|
<button v-on:click="emptyEditor()">Empty the editor</button>
|
|
|
|
|
|
<h2>Editor data</h2>
|
|
|
@@ -500,10 +377,13 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorData: '<p>Content of the editor.</p>'
|
|
|
};
|
|
|
},
|
|
|
@@ -527,15 +407,18 @@ Allows a one–way data binding that sets the content of the editor. Unlike [`v-
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" :value="editorData"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" :value="editorData"></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorData: '<p>Content of the editor.</p>'
|
|
|
};
|
|
|
}
|
|
|
@@ -552,15 +435,18 @@ Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration}
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" :config="editorConfig"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" :config="editorConfig"></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
editorConfig: {
|
|
|
toolbar: [ 'bold', 'italic', '|' 'link' ]
|
|
|
}
|
|
|
@@ -579,15 +465,18 @@ It sets the initial read–only state of the editor and changes it during its li
|
|
|
```html
|
|
|
<template>
|
|
|
<div id="app">
|
|
|
- <ckeditor editor="classic" :disabled="editorDisabled"></ckeditor>
|
|
|
+ <ckeditor :editor="editor" :disabled="editorDisabled"></ckeditor>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
+
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
data() {
|
|
|
return {
|
|
|
+ editor: ClassicEditor,
|
|
|
// This editor will be read–only when created.
|
|
|
editorDisabled: true
|
|
|
};
|
|
|
@@ -603,7 +492,7 @@ It sets the initial read–only state of the editor and changes it during its li
|
|
|
Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`} editor event.
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" @ready="onEditorReady"></ckeditor>
|
|
|
+<ckeditor :editor="editor" @ready="onEditorReady"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `focus`
|
|
|
@@ -611,7 +500,7 @@ Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`}
|
|
|
Corresponds to the {@link module:engine/view/document~Document#event:focus `focus`} editor event.
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" @focus="onEditorFocus"></ckeditor>
|
|
|
+<ckeditor :editor="editor" @focus="onEditorFocus"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `blur`
|
|
|
@@ -619,7 +508,7 @@ Corresponds to the {@link module:engine/view/document~Document#event:focus `focu
|
|
|
Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`} editor event.
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" @blur="onEditorBlur"></ckeditor>
|
|
|
+<ckeditor :editor="editor" @blur="onEditorBlur"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `input`
|
|
|
@@ -627,7 +516,7 @@ Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`
|
|
|
Corresponds to the {@link module:engine/model/document~Document#event:change:data `change:data`} editor event. See the [`v-model` directive](#v-model) to learn more.
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" @input="onEditorInput"></ckeditor>
|
|
|
+<ckeditor :editor="editor" @input="onEditorInput"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `destroy`
|
|
|
@@ -637,7 +526,7 @@ Corresponds to the {@link module:core/editor/editor~Editor#event:destroy `destro
|
|
|
**Note:** Because the destruction of the editor is promise–driven, this event can be fired before the actual promise resolves.
|
|
|
|
|
|
```html
|
|
|
-<ckeditor editor="classic" @destroy="onEditorDestroy"></ckeditor>
|
|
|
+<ckeditor :editor="editor" @destroy="onEditorDestroy"></ckeditor>
|
|
|
```
|
|
|
|
|
|
## Contributing and reporting issues
|