Răsfoiți Sursa

Docs: Extended the Vue.js component guide.

Aleksander Nowodzinski 7 ani în urmă
părinte
comite
57faf3199a
1 a modificat fișierele cu 212 adăugiri și 55 ștergeri
  1. 212 55
      docs/builds/guides/frameworks/vuejs.md

+ 212 - 55
docs/builds/guides/frameworks/vuejs.md

@@ -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.