|
@@ -45,25 +45,23 @@ 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. To enable a two–way data binding, use the [`v-model` directive](https://vuejs.org/v2/api/#v-model):
|
|
|
|
|
|
|
+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:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
-<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
|
|
+<div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
+</div>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
const app = new Vue( {
|
|
const app = new Vue( {
|
|
|
- // ...
|
|
|
|
|
-
|
|
|
|
|
|
|
+ el: '#app',
|
|
|
data: {
|
|
data: {
|
|
|
- // ...
|
|
|
|
|
-
|
|
|
|
|
editorData: '<p>Content of the editor.</p>',
|
|
editorData: '<p>Content of the editor.</p>',
|
|
|
-
|
|
|
|
|
- // ...
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // ...
|
|
|
|
|
|
|
+ editorConfig: {
|
|
|
|
|
+ // Configuration of the editor.
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
@@ -73,15 +71,9 @@ const app = new Vue( {
|
|
|
|
|
|
|
|
### Using ES6 modules
|
|
### Using ES6 modules
|
|
|
|
|
|
|
|
-Import the editor build and the component modules into your applications:
|
|
|
|
|
|
|
+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/).
|
|
|
|
|
|
|
|
-```js
|
|
|
|
|
-import Vue from 'vue';
|
|
|
|
|
-import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
|
|
|
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-Install the plugin in your application using the [`Vue.use`](https://vuejs.org/v2/api/#Vue-use) method, specifying the editor build:
|
|
|
|
|
|
|
+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:
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
import Vue from 'vue';
|
|
import Vue from 'vue';
|
|
@@ -99,46 +91,34 @@ 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. To enable a two–way data binding, use the [`v-model` directive](https://vuejs.org/v2/api/#v-model):
|
|
|
|
|
|
|
+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.
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
-<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-```js
|
|
|
|
|
-import Vue from 'vue';
|
|
|
|
|
-import CKEditor from '@ckeditor/ckeditor5-vue';
|
|
|
|
|
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
|
|
|
|
-
|
|
|
|
|
-Vue.use( CKEditor, {
|
|
|
|
|
- editors: {
|
|
|
|
|
- classic: ClassicEditor
|
|
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'app',
|
|
|
|
|
+ data: () => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ editorData: '<p>Content of the editor.</p>',
|
|
|
|
|
+ editorConfig: {
|
|
|
|
|
+ // Configuration of the editor.
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
-} );
|
|
|
|
|
-
|
|
|
|
|
-const app = new Vue( {
|
|
|
|
|
- // ...
|
|
|
|
|
-
|
|
|
|
|
- data: {
|
|
|
|
|
- // ...
|
|
|
|
|
-
|
|
|
|
|
- editorData: '<p>Content of the editor.</p>',
|
|
|
|
|
-
|
|
|
|
|
- // ...
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // ...
|
|
|
|
|
-} );
|
|
|
|
|
|
|
+</script>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
<info-box>
|
|
<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](#supported-directives) and [events](#supported-events) that will help you configure the component.
|
|
|
</info-box>
|
|
</info-box>
|
|
|
|
|
|
|
|
-### Using Vue CLI
|
|
|
|
|
-
|
|
|
|
|
-TODO
|
|
|
|
|
-
|
|
|
|
|
## Plugin configuration
|
|
## Plugin configuration
|
|
|
|
|
|
|
|
### Editors
|
|
### Editors
|
|
@@ -159,8 +139,8 @@ 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 right editor instance:
|
|
|
|
|
|
|
|
```html
|
|
```html
|
|
|
-<ckeditor editor="classic" ...></ckeditor>
|
|
|
|
|
-<ckeditor editor="inline" ...></ckeditor>
|
|
|
|
|
|
|
+<ckeditor editor="classic"></ckeditor>
|
|
|
|
|
+<ckeditor editor="inline"></ckeditor>
|
|
|
```
|
|
```
|
|
|
|
|
|
|
|
### Component name
|
|
### Component name
|
|
@@ -169,9 +149,7 @@ You can change the name of the CKEditor component (by default `<ckeditor>`) usin
|
|
|
|
|
|
|
|
```js
|
|
```js
|
|
|
Vue.use( CKEditor, {
|
|
Vue.use( CKEditor, {
|
|
|
- componentName: 'myEditor',
|
|
|
|
|
-
|
|
|
|
|
- // ...
|
|
|
|
|
|
|
+ componentName: 'myEditor'
|
|
|
} );
|
|
} );
|
|
|
```
|
|
```
|
|
|
|
|
|
|
@@ -183,8 +161,187 @@ Use the new name in the template to create editor instances:
|
|
|
|
|
|
|
|
## Component directives
|
|
## Component directives
|
|
|
|
|
|
|
|
|
|
+### `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:
|
|
|
|
|
+
|
|
|
|
|
+```js
|
|
|
|
|
+Vue.use( CKEditor, {
|
|
|
|
|
+ editors: {
|
|
|
|
|
+ classic: ClassicEditor,
|
|
|
|
|
+ inline: InlineEditor,
|
|
|
|
|
+
|
|
|
|
|
+ // ...
|
|
|
|
|
+ }
|
|
|
|
|
+} );
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<ckeditor editor="classic"></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:
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<ckeditor editor="classic" tag-name="textarea"></ckeditor>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `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:
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" v-model="editorData"></ckeditor>
|
|
|
|
|
+ <button v-on:click="emptyEditor()">Empty the editor</button>
|
|
|
|
|
+
|
|
|
|
|
+ <h2>Editor data</h2>
|
|
|
|
|
+ <code>{{ editorData }}</code>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'app',
|
|
|
|
|
+ data: () => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ editorData: '<p>Content of the editor.</p>'
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ emptyEditor() {
|
|
|
|
|
+ this.editorData = '';
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</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.
|
|
|
|
|
+
|
|
|
|
|
+If you want to execute an action when the editor data changes, use the [`input`](#input) event.
|
|
|
|
|
+
|
|
|
|
|
+### `value`
|
|
|
|
|
+
|
|
|
|
|
+Allows a one–way data binding that sets the content of the editor. Unlike [`v-model`](#v-model), the value will not be updated when as the content of the editor changes.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" :value="editorData"></ckeditor>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'app',
|
|
|
|
|
+ data: () => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ editorData: '<p>Content of the editor.</p>'
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+To execute an action when the editor data changes, use the [`input`](#input) event.
|
|
|
|
|
+
|
|
|
|
|
+### `config`
|
|
|
|
|
+
|
|
|
|
|
+Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration} of the editor.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" :config="editorConfig"></ckeditor>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'app',
|
|
|
|
|
+ data: () => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ editorConfig: {
|
|
|
|
|
+ toolbar: [ 'bold', 'italic', '|' 'link' ]
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `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.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div id="app">
|
|
|
|
|
+ <ckeditor editor="classic" :disabled="editorDisabled"></ckeditor>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'app',
|
|
|
|
|
+ data: () => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // This editor will be read–only when created.
|
|
|
|
|
+ editorDisabled: true
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
## Component events
|
|
## Component events
|
|
|
|
|
|
|
|
|
|
+### `ready`
|
|
|
|
|
+
|
|
|
|
|
+Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`} editor event.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<ckeditor editor="classic" @ready="onEditorReady"></ckeditor>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `focus`
|
|
|
|
|
+
|
|
|
|
|
+Corresponds to the {@link module:engine/view/document~Document#event:focus `focus`} editor event.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<ckeditor editor="classic" @focus="onEditorFocus"></ckeditor>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `blur`
|
|
|
|
|
+
|
|
|
|
|
+Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`} editor event.
|
|
|
|
|
+
|
|
|
|
|
+```html
|
|
|
|
|
+<ckeditor editor="classic" @blur="onEditorBlur"></ckeditor>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `input`
|
|
|
|
|
+
|
|
|
|
|
+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>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+### `destroy`
|
|
|
|
|
+
|
|
|
|
|
+Corresponds to the {@link module:core/editor/editor~Editor#event:destroy `destroy`} editor event.
|
|
|
|
|
+
|
|
|
|
|
+**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>
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
## Contributing and reporting issues
|
|
## Contributing and reporting issues
|
|
|
|
|
|
|
|
The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-vue.
|
|
The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-vue.
|