Răsfoiți Sursa

Docs: Improved the Vue.js component guide.

Aleksander Nowodzinski 7 ani în urmă
părinte
comite
5b22c43aae
1 a modificat fișierele cu 40 adăugiri și 10 ștergeri
  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)
 
-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
 
@@ -75,7 +79,7 @@ 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/), 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:
 
@@ -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.
 
+<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`
 
 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.
 
+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>
-	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>
 
-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
 import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
 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
 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