Переглянути джерело

Docs: Improved the Vue.js component guide.

Aleksander Nowodzinski 7 роки тому
батько
коміт
a001fe59f6
1 змінених файлів з 16 додано та 10 видалено
  1. 16 10
      docs/builds/guides/frameworks/vuejs.md

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

@@ -1,7 +1,7 @@
 ---
 menu-title: Vue.js component
 category: builds-integration-frameworks
-order: 30
+order: 40
 ---
 
 # 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.
 </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 [`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
 <div id="app">
@@ -75,9 +75,9 @@ const app = new Vue( {
 
 ### 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
 import Vue from 'vue';
@@ -95,11 +95,11 @@ Vue.use( CKEditor, {
 	Check out the [plugin configuration](#plugin-configuration) section to learn more.
 </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 [`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
 <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):
 
 ```js
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import InlineEditor from '@ckeditor/ckeditor5-build-inline';
+
 Vue.use( CKEditor, {
 	editors: {
 		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):
 
 ```js
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+import InlineEditor from '@ckeditor/ckeditor5-build-inline';
+
 Vue.use( CKEditor, {
 	editors: {
 		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.
 
-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
 <template>