|
@@ -8,9 +8,9 @@ order: 30
|
|
|
|
|
|
|
|
[](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue)
|
|
[](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue)
|
|
|
|
|
|
|
|
-CKEditor 5 provides {@link builds/guides/overview ready-to-use editor builds} and the {@link framework/guides/overview CKEditor 5 Framework} which is the foundation of all builds.
|
|
|
|
|
|
|
+The easiest way to use CKEditor 5 in your Vue.js application is by choosing one of the {@link builds/guides/overview#available-builds rich text editor builds} and simply passing it to the configuration of the Vue.js component.
|
|
|
|
|
|
|
|
-The easiest way to use CKEditor 5 in your Vue.js application is by choosing one of the {@link builds/guides/overview#available-builds rich text editor builds}. Additionally, it is also possible to integrate [CKEditor 5 built from source](#integrating-ckeditor-5-from-source) into your application.
|
|
|
|
|
|
|
+It is also possible to use [custom builds created from source](#integrating-ckeditor-5-from-source) with the component.
|
|
|
|
|
|
|
|
## Quick start
|
|
## Quick start
|
|
|
|
|
|
|
@@ -24,14 +24,14 @@ npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
|
|
|
|
|
|
|
|
### Direct `<script>` Include
|
|
### Direct `<script>` Include
|
|
|
|
|
|
|
|
-Assuming [Vue is installed](https://vuejs.org/v2/guide/installation.html) in your project, include the `<script>` tags for the editor component and the build:
|
|
|
|
|
|
|
+This is the quickest way to start using CKEditor in your project. Assuming [Vue is installed](https://vuejs.org/v2/guide/installation.html), include the `<script>` tags for the editor component and the build:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
|
|
<script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
|
|
|
<script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>
|
|
<script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-Install the plugin in your application using the [`Vue.use`](https://vuejs.org/v2/api/#Vue-use) method, specifying the editor build:
|
|
|
|
|
|
|
+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:
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
@@ -42,10 +42,14 @@ Vue.use( CKEditor, {
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
<info-box>
|
|
<info-box>
|
|
|
- Check out the [plugin configuration](#plugin-configuration) section to learn more.
|
|
|
|
|
|
|
+ Check out the [plugin configuration](#plugin-configuration) section to learn more about the available options.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
-Use the component in your template. Use the [`v-model` directive](https://vuejs.org/v2/api/#v-model)to enable a two–way data binding:
|
|
|
|
|
|
|
+Use the component in your template:
|
|
|
|
|
+
|
|
|
|
|
+* The [`editor`](#editor) directive will specify which editor build will be used.
|
|
|
|
|
+* The [`v-model`](#v-model) directive enables a two–way data binding out–of–the–box.
|
|
|
|
|
+* The [`config`](#v-model) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<div id="app">
|
|
<div id="app">
|
|
@@ -73,7 +77,7 @@ const app = new Vue( {
|
|
|
|
|
|
|
|
The editor component comes as the [UMD module](https://github.com/umdjs/umd), which makes it possible to use in various environments, e.g. the application generated by [Vue CLI](https://cli.vuejs.org/).
|
|
The editor component comes as the [UMD module](https://github.com/umdjs/umd), which makes it possible to use in various environments, e.g. the application generated by [Vue CLI](https://cli.vuejs.org/).
|
|
|
|
|
|
|
|
-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, install the plugin 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, specifying the editor builds you want to use:
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
import Vue from 'vue';
|
|
import Vue from 'vue';
|
|
@@ -91,7 +95,11 @@ Vue.use( CKEditor, {
|
|
|
Check out the [plugin configuration](#plugin-configuration) section to learn more.
|
|
Check out the [plugin configuration](#plugin-configuration) section to learn more.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
-Use the component in your template. The following examples is a single–file main component of the application. Note the [`v-model` directive](https://vuejs.org/v2/api/#v-model) which enables a two–way data binding.
|
|
|
|
|
|
|
+The following examples represents a single–file component of the application. Use the CKEditor component in your template:
|
|
|
|
|
+
|
|
|
|
|
+* The [`editor`](#editor) directive will specify which editor build will be used.
|
|
|
|
|
+* The [`v-model`](#v-model) directive enables a two–way data binding out–of–the–box.
|
|
|
|
|
+* The [`config`](#v-model) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<template>
|
|
<template>
|
|
@@ -121,9 +129,9 @@ Use the component in your template. The following examples is a single–file ma
|
|
|
|
|
|
|
|
## Plugin configuration
|
|
## Plugin configuration
|
|
|
|
|
|
|
|
-### Editors
|
|
|
|
|
|
|
+### `editors`
|
|
|
|
|
|
|
|
-You can specify the editor builds available to the component using the `editors` property. Editors can be either {@link builds/guides/overview ready-to-use editor builds} or [custom builds created from source](#integrating-ckeditor-5-from-source):
|
|
|
|
|
|
|
+**This configuration is mandatory** and specifies editor builds available to the component. Editors can be either {@link builds/guides/overview ready-to-use editor builds} or [custom builds created from source](#integrating-ckeditor-5-from-source):
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
@@ -136,14 +144,14 @@ Vue.use( CKEditor, {
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-Use the name of the build in your template to create the right editor instance:
|
|
|
|
|
|
|
+Use the name of the build in your template to create the editor instance of your choice:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<ckeditor editor="classic"></ckeditor>
|
|
<ckeditor editor="classic"></ckeditor>
|
|
|
<ckeditor editor="inline"></ckeditor>
|
|
<ckeditor editor="inline"></ckeditor>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-### Component name
|
|
|
|
|
|
|
+### `componentName`
|
|
|
|
|
|
|
|
You can change the name of the CKEditor component (by default `<ckeditor>`) using the `componentName` property:
|
|
You can change the name of the CKEditor component (by default `<ckeditor>`) using the `componentName` property:
|
|
|
|
|
|
|
@@ -153,7 +161,7 @@ Vue.use( CKEditor, {
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
-Use the new name in the template to create editor instances:
|
|
|
|
|
|
|
+Use the new component name in the template to create editor instances:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<myEditor editor="classic"></myEditor>
|
|
<myEditor editor="classic"></myEditor>
|
|
@@ -163,7 +171,7 @@ Use the new name in the template to create editor instances:
|
|
|
|
|
|
|
|
### `editor`
|
|
### `editor`
|
|
|
|
|
|
|
|
-Specified the editor build to be used by the component. This directive is mandatory and must correspond to one of editor builds defined when installing the plugin:
|
|
|
|
|
|
|
+**This directive is mandatory** and specifies the editor build to be used by the component. To work properly, it must correspond to one of [previously registered editor builds](#editors):
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
@@ -190,7 +198,7 @@ By default, the editor component creates a `<div>` container which is used as an
|
|
|
|
|
|
|
|
### `v-model`
|
|
### `v-model`
|
|
|
|
|
|
|
|
-A standard directive for form inputs in Vue. Unlike [`value`](#value), it creates a two–way data binding, which automatically updates the state of the application as the content of the editor changes but it can also be used to set editor data when necessary:
|
|
|
|
|
|
|
+A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue. Unlike [`value`](#value), it creates a two–way data binding, which automatically updates the state of the application as the content of the editor changes but it can also be used to set editor data when necessary:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<template>
|
|
<template>
|
|
@@ -222,7 +230,7 @@ A standard directive for form inputs in Vue. Unlike [`value`](#value), it create
|
|
|
|
|
|
|
|
In the above example, the `editorData` property will be updated automatically as the user types and changes the content. It can also be used to change (as in the `emptyEditor()` method) or set the initial content of the editor.
|
|
In the above example, the `editorData` property will be updated automatically as the user types and changes the content. It can also be used to change (as in the `emptyEditor()` method) or set the initial content of the editor.
|
|
|
|
|
|
|
|
-If you want to execute an action when the editor data changes, use the [`input`](#input) event.
|
|
|
|
|
|
|
+If you only want to execute an action when the editor data changes, use the [`input`](#input) event.
|
|
|
|
|
|
|
|
### `value`
|
|
### `value`
|
|
|
|
|
|