|
@@ -1,7 +1,7 @@
|
|
|
---
|
|
---
|
|
|
menu-title: Vue.js component
|
|
menu-title: Vue.js component
|
|
|
category: builds-integration-frameworks
|
|
category: builds-integration-frameworks
|
|
|
-order: 30
|
|
|
|
|
|
|
+order: 40
|
|
|
---
|
|
---
|
|
|
|
|
|
|
|
# Rich text editor component for Vue.js
|
|
# Rich text editor component for Vue.js
|
|
@@ -45,11 +45,11 @@ Vue.use( CKEditor, {
|
|
|
Check out the [plugin configuration](#plugin-configuration) section to learn more about the available options.
|
|
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 `<ckeditor>` component in your template:
|
|
|
|
|
|
|
|
-* The [`editor`](#editor) directive will specify the editor build.
|
|
|
|
|
|
|
+* The [`editor`](#editor) directive specifies the editor build.
|
|
|
* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
|
-* The [`config`](#config) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
|
+* The [`config`](#config) directive helps you pass the configuration to the editor instance.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<div id="app">
|
|
<div id="app">
|
|
@@ -75,9 +75,9 @@ const app = new Vue( {
|
|
|
|
|
|
|
|
### Using ES6 modules
|
|
### Using ES6 modules
|
|
|
|
|
|
|
|
-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](https://cli.vuejs.org/), build using [webpack](https://webpack.js.org), etc..
|
|
|
|
|
|
|
+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](https://cli.vuejs.org/), built using [webpack](https://webpack.js.org), etc..
|
|
|
|
|
|
|
|
-To create a 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, specifying the editor builds you want to use:
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
import Vue from 'vue';
|
|
import Vue from 'vue';
|
|
@@ -95,11 +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>
|
|
|
|
|
|
|
|
-The following examples represents a single–file component of the application. Use the CKEditor component in your template:
|
|
|
|
|
|
|
+The following example showcases a single–file component of the application. Use the `<ckeditor>` component in your template:
|
|
|
|
|
|
|
|
-* The [`editor`](#editor) directive will specify the editor build.
|
|
|
|
|
|
|
+* The [`editor`](#editor) directive specifies the editor build.
|
|
|
* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
|
-* The [`config`](#config) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
|
+* The [`config`](#config) directive helps you pass the configuration to the editor instance.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<template>
|
|
<template>
|
|
@@ -134,6 +134,9 @@ The following examples represents a single–file component of the application.
|
|
|
**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):
|
|
**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
|
|
|
|
|
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
+import InlineEditor from '@ckeditor/ckeditor5-build-inline';
|
|
|
|
|
+
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
|
editors: {
|
|
editors: {
|
|
|
classic: ClassicEditor,
|
|
classic: ClassicEditor,
|
|
@@ -174,6 +177,9 @@ Use the new component name in the template to create editor instances:
|
|
|
**This directive is mandatory** and specifies the editor build to be used by the component. To work properly, it must correspond to one of [registered editor builds](#editors):
|
|
**This directive is mandatory** and specifies the editor build to be used by the component. To work properly, it must correspond to one of [registered editor builds](#editors):
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
|
|
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
+import InlineEditor from '@ckeditor/ckeditor5-build-inline';
|
|
|
|
|
+
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
|
editors: {
|
|
editors: {
|
|
|
classic: ClassicEditor,
|
|
classic: ClassicEditor,
|
|
@@ -294,7 +300,7 @@ Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration}
|
|
|
|
|
|
|
|
This directive controls the {@link module:core/editor/editor~Editor#isReadOnly `isReadOnly`} property of the editor.
|
|
This directive controls the {@link module:core/editor/editor~Editor#isReadOnly `isReadOnly`} property of the editor.
|
|
|
|
|
|
|
|
-It sets the initial read–only state of the editor and changes it during its life cycle.
|
|
|
|
|
|
|
+It sets the initial read–only state of the editor and changes it during its lifecycle.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
<template>
|
|
<template>
|