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

Docs: Improved the Vue.js component guide.

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

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

@@ -8,9 +8,13 @@ order: 40
 
 
 [![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)
 
 
-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](#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.
 
 
-The component can also work with [custom builds created from source](#using-ckeditor-built-from-source).
+Advanced integrations can make use of the component working with [custom builds created from source](#using-ckeditor-built-from-source) after some [configuration](#configuring-vueconfigjs).
+
+<info-box>
+	The component is compatible with Vue.js 2.x.
+</info-box>
 
 
 ## Quick start
 ## Quick start
 
 
@@ -75,7 +79,7 @@ const app = new Vue( {
 
 
 ### Using ES6 modules
 ### 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/), 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, 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:
 
 
@@ -133,6 +137,10 @@ Integrating the rich text editor from source allows you to use the full power of
 
 
 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.
 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.
 
 
+<info-box>
+	Learn more about building CKEditor from source in the {@link builds/guides/integration/advanced-setup Advanced setup} guide.
+</info-box>
+
 ### Configuring `vue.config.js`
 ### Configuring `vue.config.js`
 
 
 To build CKEditor with your application, certain changes must be made to the default project configuration.
 To build CKEditor with your application, certain changes must be made to the default project configuration.
@@ -212,12 +220,12 @@ npm install --save \
 
 
 You can use more packages, depending on which feature are needed in your application.
 You can use more packages, depending on which feature are needed in your application.
 
 
+Create a separate `ckeditor.js` file that will combine editor features (`BoldPlugin`, `ItalicPlugin`, etc.) with the base editor (`ClassicEditorBase`) and export it as your custom build (`MyEditorBuild`):
+
 <info-box>
 <info-box>
-	Learn more about building CKEditor from source in the {@link builds/guides/integration/advanced-setup Advanced setup} guide.
+	You can use the same methodology to integrate multiple CKEditor builds in your application as an optimized {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}, e.g. when you need both `ClassicEditor` and `BalloonEditor`.
 </info-box>
 </info-box>
 
 
-Create a separate `ckeditor.js` file that will combine editor features (`BoldPlugin`, `ItalicPlugin`, etc.) with the base editor (`ClassicEditorBase`) and export it as your custom build (`MyEditorBuild`):
-
 ```js
 ```js
 import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
@@ -250,7 +258,9 @@ MyEditorBuild.defaultConfig = {
 };
 };
 ```
 ```
 
 
-Finally, use your build when [enabling the Vue.js component](#editors):
+### Using the custom editor build
+
+Make sure your build is [available to the component](#editors) (e.g. in `main.js`):
 
 
 ```js
 ```js
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import CKEditor from '@ckeditor/ckeditor5-vue';
@@ -263,9 +273,29 @@ Vue.use( CKEditor, {
 } );
 } );
 ```
 ```
 
 
-<info-box>
-	You can use the same methodology to integrate multiple CKEditor builds in your application as an optimized {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}, e.g. when you need both `ClassicEditor` and `BalloonEditor`.
-</info-box>
+Now all you need to do is specify `myBuild` in the [`editor`](#editor) directive to get your CKEditor instance use `MyEditorBuild`:
+
+```html
+<template>
+	<div id="app">
+		<ckeditor editor="myBuild" 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.
+				}
+			};
+		}
+	}
+</script>
+```
 
 
 ## Plugin configuration
 ## Plugin configuration