ソースを参照

Docs: Vue integration docs corrected. [skip ci]

Anna Tomanek 7 年 前
コミット
178e8d6484

+ 1 - 1
docs/builds/guides/frameworks/overview.md

@@ -34,7 +34,7 @@ There are three official integrations so far:
 
 Refer to their documentation to learn how to use them.
 
-We plan to provide more integrations with time. The next in the queue is [Vue.js](https://vuejs.org/) and we would like to [hear your ideas](https://github.com/ckeditor/ckeditor5/issues/1002) what we should work on after that.
+We plan to provide more integrations with time. We would like to [hear your ideas](https://github.com/ckeditor/ckeditor5/issues/1002) what we should work on next.
 
 ## Compatibility with Electron
 

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

@@ -8,6 +8,9 @@ order: 40
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-vue.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue)
 
+
+CKEditor 5 consists of {@link builds/guides/overview ready-to-use editor builds} and {@link framework/guides/overview CKEditor 5 Framework} upon which the builds are based.
+
 The [easiest way](#quick-start) 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. Read more about this solution in the [Quick start](#quick-start) section.
 
 Additionally, you can [integrate CKEditor 5 from source](#using-ckeditor-from-source) which is a much more flexible and powerful solution, but requires some additional configuration.
@@ -18,7 +21,7 @@ Additionally, you can [integrate CKEditor 5 from source](#using-ckeditor-from-so
 
 ## Quick start
 
-Install the [CKEditor 5 rich text editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the {@link builds/guides/overview#available-builds build of your choice}.
+Install the [CKEditor 5 WYSIWYG editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the {@link builds/guides/overview#available-builds build of your choice}.
 
 Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic):
 
@@ -26,7 +29,7 @@ Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs
 npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
 ```
 
-Now, you need to enable CKEditor component in your application. There are 2 ways to do so:
+You now need to enable the CKEditor component in your application. There are 2 ways to do so:
 
 * [via a direct script include](#direct-script-include),
 * [by using ES6 module imports](#using-es6-modules).
@@ -35,14 +38,14 @@ Optionally, you can [use the component locally](#using-component-locally).
 
 ### Direct script include
 
-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:
+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 WYSIWYG editor component and the build:
 
 ```html
 <script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
 <script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>
 ```
 
-Enable the component in your application using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method:
+Enable the component in your application by using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method:
 
 ```js
 Vue.use( CKEditor );
@@ -71,13 +74,13 @@ const app = new Vue( {
 		editor: ClassicEditor,
 		editorData: '<p>Content of the editor.</p>',
 		editorConfig: {
-			// Configuration of the editor.
+			// The configuration of the editor.
 		}
 	}
 } );
 ```
 
-Voila! You should see CKEditor 5 running in your Vue.js app.
+Voilà! You should see CKEditor 5 running in your Vue.js app.
 
 <info-box>
 	See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
@@ -85,7 +88,7 @@ Voila! You should see CKEditor 5 running in your Vue.js app.
 
 ### 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 3](https://cli.vuejs.org/), built 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 3](https://cli.vuejs.org/), built 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:
 
@@ -123,7 +126,7 @@ The following example showcases a single–file component of the application. Us
 				editor: ClassicEditor,
 				editorData: '<p>Content of the editor.</p>',
 				editorConfig: {
-					// Configuration of the editor.
+					// The configuration of the editor.
 				}
 			};
 		}
@@ -137,7 +140,7 @@ The following example showcases a single–file component of the application. Us
 
 ## Using component locally
 
-If you do not want the CKEditor component to be enabled globally, you can entirely skip the `Vue.use( CKEditor )` part. Instead, configure it in the `components` property of your view.
+If you do not want the CKEditor component to be enabled globally, you can skip the `Vue.use( CKEditor )` part entirely. Instead, configure it in the `components` property of your view.
 
 <info-box>
 	Make sure `CKEditor` and `ClassicEditor` are accessible depending on the integration scenario: as [direct script includes](#direct-script-include) or [ES6 module imports](#using-es6-modules).
@@ -170,7 +173,7 @@ If you do not want the CKEditor component to be enabled globally, you can entire
 
 ## Using CKEditor from source
 
-Integrating the rich text editor from source allows you to use the full power of the {@link framework/guides/overview CKEditor 5 Framework}.
+Integrating the rich text editor from source allows you to use the full power of {@link framework/guides/overview CKEditor 5 Framework}.
 
 This guide assumes that you are using [Vue CLI 3+](https://cli.vuejs.org) as your boilerplate and your application has been created using the [`vue create`](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) command.
 
@@ -200,7 +203,7 @@ const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
 
 module.exports = {
 	// The source of CKEditor is encapsulated in ES6 modules. By default, the code
-	// from node_modules directory is not transpiled, so we must explicitly tell
+	// from the node_modules directory is not transpiled, so you must explicitly tell
 	// the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
 	transpileDependencies: [
 		/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
@@ -230,8 +233,8 @@ module.exports = {
 	},
 
 	chainWebpack: config => {
-		// Vue CLI would normally use own loader to load .svg files. The icons used by
-		// CKEditor should be loaded using the raw-loader instead.
+		// Vue CLI would normally use its own loader to load .svg files. The icons used by
+		// CKEditor should be loaded using raw-loader instead.
 		config.module
 			.rule( 'svg' )
 			.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
@@ -267,7 +270,7 @@ Vue.use( CKEditor );
 	Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
 </info-box>
 
-Now all you need to do is specify the list of editor options (**including plugins**) in the `editorConfig` data property:
+Now all you need to do is specify the list of rich text editor options (**including plugins**) in the `editorConfig` data property:
 
 ```html
 <template>
@@ -351,7 +354,7 @@ This directive specifies the editor to be used by the component. It must directl
 
 ### `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, so for example to create a `<textarea>`, use the following directive:
 
 ```html
 <ckeditor :editor="editor" tag-name="textarea"></ckeditor>
@@ -363,7 +366,7 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
 
 * 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.
+* can be used to set the editor content when necessary.
 
 ```html
 <template>
@@ -402,7 +405,7 @@ If you only want to execute an action when the editor data changes, use the [`in
 
 ### `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.
+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 the content of the editor changes.
 
 ```html
 <template>