|
|
@@ -47,8 +47,8 @@ Vue.use( CKEditor, {
|
|
|
|
|
|
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 [`editor`](#editor) directive will specify the editor build.
|
|
|
+* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
|
* The [`config`](#v-model) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
```html
|
|
|
@@ -70,14 +70,14 @@ const app = new Vue( {
|
|
|
```
|
|
|
|
|
|
<info-box>
|
|
|
- See the list of supported [directives](#supported-directives) and [events](#supported-events) that will help you configure the component.
|
|
|
+ See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
|
|
|
</info-box>
|
|
|
|
|
|
### Using ES6 modules
|
|
|
|
|
|
-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 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..
|
|
|
|
|
|
-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 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:
|
|
|
|
|
|
```js
|
|
|
import Vue from 'vue';
|
|
|
@@ -97,8 +97,8 @@ Vue.use( CKEditor, {
|
|
|
|
|
|
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 [`editor`](#editor) directive will specify the editor build.
|
|
|
+* The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
|
|
|
* The [`config`](#v-model) directive will help you pass the configuration to the editor instance.
|
|
|
|
|
|
```html
|
|
|
@@ -111,7 +111,7 @@ The following examples represents a single–file component of the application.
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
- data: () => {
|
|
|
+ data() {
|
|
|
return {
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
editorConfig: {
|
|
|
@@ -124,7 +124,7 @@ The following examples represents a single–file component of the application.
|
|
|
```
|
|
|
|
|
|
<info-box>
|
|
|
- See the list of supported [directives](#supported-directives) and [events](#supported-events) that will help you configure the component.
|
|
|
+ See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
|
|
|
</info-box>
|
|
|
|
|
|
## Plugin configuration
|
|
|
@@ -144,7 +144,7 @@ Vue.use( CKEditor, {
|
|
|
} );
|
|
|
```
|
|
|
|
|
|
-Use the name of the build in your template to create the editor instance of your choice:
|
|
|
+Use the [name of the build](#editor) in your template to create the editor instance of your choice:
|
|
|
|
|
|
```html
|
|
|
<ckeditor editor="classic"></ckeditor>
|
|
|
@@ -153,7 +153,7 @@ Use the name of the build in your template to create the editor instance of your
|
|
|
|
|
|
### `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 using the `componentName` property (by default `<ckeditor>`):
|
|
|
|
|
|
```js
|
|
|
Vue.use( CKEditor, {
|
|
|
@@ -171,7 +171,7 @@ Use the new component name in the template to create editor instances:
|
|
|
|
|
|
### `editor`
|
|
|
|
|
|
-**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):
|
|
|
+**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
|
|
|
Vue.use( CKEditor, {
|
|
|
@@ -185,12 +185,16 @@ Vue.use( CKEditor, {
|
|
|
```
|
|
|
|
|
|
```html
|
|
|
+<!-- The following will create an instance of ClassicEditor. -->
|
|
|
<ckeditor editor="classic"></ckeditor>
|
|
|
+
|
|
|
+<!-- The following will create an instance of InlineEditor. -->
|
|
|
+<ckeditor editor="inline"></ckeditor>
|
|
|
```
|
|
|
|
|
|
### `tag-name`
|
|
|
|
|
|
-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:
|
|
|
+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>
|
|
|
@@ -198,7 +202,11 @@ By default, the editor component creates a `<div>` container which is used as an
|
|
|
|
|
|
### `v-model`
|
|
|
|
|
|
-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:
|
|
|
+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:
|
|
|
+
|
|
|
+* sets the initial editor content,
|
|
|
+* automatically updates the state of the application as the editor content changes (e.g. as the user types),
|
|
|
+* can be used to set editor content when necessary.
|
|
|
|
|
|
```html
|
|
|
<template>
|
|
|
@@ -214,7 +222,7 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
- data: () => {
|
|
|
+ data() {
|
|
|
return {
|
|
|
editorData: '<p>Content of the editor.</p>'
|
|
|
};
|
|
|
@@ -228,7 +236,7 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
|
|
|
</script>
|
|
|
```
|
|
|
|
|
|
-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 `emptyEditor()`) or set the initial content of the editor.
|
|
|
|
|
|
If you only want to execute an action when the editor data changes, use the [`input`](#input) event.
|
|
|
|
|
|
@@ -246,7 +254,7 @@ Allows a one–way data binding that sets the content of the editor. Unlike [`v-
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
- data: () => {
|
|
|
+ data() {
|
|
|
return {
|
|
|
editorData: '<p>Content of the editor.</p>'
|
|
|
};
|
|
|
@@ -271,7 +279,7 @@ Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration}
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
- data: () => {
|
|
|
+ data() {
|
|
|
return {
|
|
|
editorConfig: {
|
|
|
toolbar: [ 'bold', 'italic', '|' 'link' ]
|
|
|
@@ -284,7 +292,9 @@ Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration}
|
|
|
|
|
|
### `disabled`
|
|
|
|
|
|
-This directive controls the {@link module:core/editor/editor~Editor#isReadOnly `isReadOnly`} property of the editor. It can set the initial state as well as change it during the life cycle 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.
|
|
|
|
|
|
```html
|
|
|
<template>
|
|
|
@@ -296,7 +306,7 @@ This directive controls the {@link module:core/editor/editor~Editor#isReadOnly `
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'app',
|
|
|
- data: () => {
|
|
|
+ data() {
|
|
|
return {
|
|
|
// This editor will be read–only when created.
|
|
|
editorDisabled: true
|