8
0
Просмотр исходного кода

Docs: Extended the Vue.js component guide.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
2ab94dd917
1 измененных файлов с 24 добавлено и 16 удалено
  1. 24 16
      docs/builds/guides/frameworks/vuejs.md

+ 24 - 16
docs/builds/guides/frameworks/vuejs.md

@@ -8,9 +8,9 @@ order: 30
 
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-vue.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-vue.svg)](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`