Jelajahi Sumber

Docs: Improved the Vue.js component guide.

Aleksander Nowodzinski 7 tahun lalu
induk
melakukan
c452bcddaf
1 mengubah file dengan 30 tambahan dan 20 penghapusan
  1. 30 20
      docs/builds/guides/frameworks/vuejs.md

+ 30 - 20
docs/builds/guides/frameworks/vuejs.md

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