Bladeren bron

Merge pull request #1340 from ckeditor/t/ckeditor5-vue/1b

Docs: Updated the Vue.js component documentation after `componentName` and `editors` options have been removed (see ckeditor/ckeditor5-vue#1).
Piotrek Koszuliński 7 jaren geleden
bovenliggende
commit
ea95190c2b
1 gewijzigde bestanden met toevoegingen van 68 en 179 verwijderingen
  1. 68 179
      docs/builds/guides/frameworks/vuejs.md

+ 68 - 179
docs/builds/guides/frameworks/vuejs.md

@@ -31,7 +31,7 @@ Now, you need to enable CKEditor component in your application. There are 2 ways
 * [via a direct script include](#direct-script-include),
 * [by using ES6 module imports](#using-es6-modules).
 
-Optionally, you can [configure the component locally](#using-the-component-locally).
+Optionally, you can [use the component locally](#using-component-locally).
 
 ### Direct script include
 
@@ -42,22 +42,14 @@ This is the quickest way to start using CKEditor in your project. Assuming [Vue
 <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, specifying the editor build you want to use:
+Enable the component in your application using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method:
 
 ```js
-Vue.use( CKEditor, {
-	editors: {
-		classic: ClassicEditor
-	}
-} );
+Vue.use( CKEditor );
 ```
 
 <info-box>
-	Check out the [component configuration](#component-configuration) section to learn more about the available options.
-</info-box>
-
-<info-box>
-	You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
+	Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
 </info-box>
 
 Use the `<ckeditor>` component in your template:
@@ -68,7 +60,7 @@ Use the `<ckeditor>` component in your template:
 
 ```html
 <div id="app">
-	<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
+	<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 </div>
 ```
 
@@ -76,6 +68,7 @@ Use the `<ckeditor>` component in your template:
 const app = new Vue( {
 	el: '#app',
 	data: {
+		editor: ClassicEditor,
 		editorData: '<p>Content of the editor.</p>',
 		editorConfig: {
 			// Configuration of the editor.
@@ -94,46 +87,40 @@ Voila! You should see CKEditor 5 running in your Vue.js app.
 
 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:
 
 ```js
 import Vue from 'vue';
 import CKEditor from '@ckeditor/ckeditor5-vue';
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
-Vue.use( CKEditor, {
-	editors: {
-		classic: ClassicEditor
-	}
-} );
+Vue.use( CKEditor );
 ```
 
 <info-box>
-	Check out the [component configuration](#component-configuration) section to learn more.
-</info-box>
-
-<info-box>
-	You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
+	Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally).
 </info-box>
 
 The following example showcases a single–file component of the application. Use the `<ckeditor>` component in your template:
 
-* The [`editor`](#editor) directive specifies the editor build.
+* The [`editor`](#editor) directive specifies the editor build (the editor constructor).
 * The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding.
 * The [`config`](#config) directive helps you pass the configuration to the editor instance.
 
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
+		<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 	</div>
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
 	export default {
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				editorData: '<p>Content of the editor.</p>',
 				editorConfig: {
 					// Configuration of the editor.
@@ -148,55 +135,18 @@ The following example showcases a single–file component of the application. Us
 	See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
 </info-box>
 
-## Using the component locally
-
-### Local configuration
+## Using component locally
 
-If a per–view editor configuration is what suits you best, you can skip the [`editors`](#editors) option in `Vue.use()` when enabling the component.
+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.
 
 <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).
 </info-box>
 
-```js
-Vue.use( CKEditor );
-```
-
-and then pass the editor of your choice in the [`editor`](#editor) directive:
-
 ```html
 <template>
 	<div id="app">
-		<ckeditor :editor="editorType" ... ></ckeditor>
-	</div>
-</template>
-
-<script>
-	export default {
-		name: 'app',
-		data() {
-			return {
-				editorType: ClassicEditor,
-
-				// ...
-			};
-		}
-	}
-</script>
-```
-
-### Local component registration
-
-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.
-
-<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).
-</info-box>
-
-```html
-<template>
-	<div id="app">
-		<ckeditor :editor="editorType" ... ></ckeditor>
+		<ckeditor :editor="editor" ... ></ckeditor>
 	</div>
 </template>
 
@@ -204,12 +154,12 @@ If you do not want the CKEditor component to be enabled globally, you can entire
 	export default {
 		name: 'app',
 		components: {
-			// Use the CKEditor component in this view.
+			// Use the <ckeditor> component in this view.
 			ckeditor: CKEditor.component
 		},
 		data() {
 			return {
-				editorType: ClassicEditor,
+				editor: ClassicEditor,
 
 				// ...
 			};
@@ -307,34 +257,28 @@ npm install --save \
 
 You can use more packages, depending on which features are needed in your application.
 
-Make sure your editor is [available to the component](#editors) (e.g. in `main.js`):
-
 ```js
 import CKEditor from '@ckeditor/ckeditor5-vue';
 
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-
-Vue.use( CKEditor, {
-	editors: {
-		classic: ClassicEditor
-	}
-} );
+Vue.use( CKEditor );
 ```
 
 <info-box>
-	You can always configure the component locally if you do not want to [specify the editors](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration).
+	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 `classic` in the [`editor`](#editor) directive and the list of editor options (**including plugins**) in the `editorConfig` data property:
+Now all you need to do is specify the list of editor options (**including plugins**) in the `editorConfig` data property:
 
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
+		<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 	</div>
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+
 	import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
 	import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
 	import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
@@ -345,6 +289,7 @@ Now all you need to do is specify `classic` in the [`editor`](#editor) directive
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				editorData: '<p>Content of the editor.</p>',
 				editorConfig: {
 					plugins: [
@@ -371,102 +316,34 @@ Now all you need to do is specify `classic` in the [`editor`](#editor) directive
 </script>
 ```
 
-## Component configuration
-
-<info-box>
-	You can entirely skip the configuration part if you decide to [configure the component locally](#using-the-component-locally).
-</info-box>
-
-### `editors`
-
-This configuration specifies editors available to the component. You can use {@link builds/guides/overview ready-to-use builds} or [editors from source](#using-ckeditor-from-source):
-
-```js
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-
-Vue.use( CKEditor, {
-	editors: {
-		classic: ClassicEditor,
-
-		// ...
-	}
-} );
-```
-
-Use the [name of the editor](#editor) in your template to create the editor instance of your choice:
-
-```html
-<ckeditor editor="classic"></ckeditor>
-```
-
-<info-box>
-	To use more than one rich text editor build in your application, you will need to configure it [from source](#using-ckeditor-from-source) or use a {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}.
-</info-box>
-
-<info-box>
-	You can skip this configuration and [pass the editor directly](#local-configuration) in the [`editor`](#editor) directive.
-</info-box>
-
-### `componentName`
-
-You can change the name of the CKEditor component using the `componentName` property (by default `<ckeditor>`):
-
-```js
-Vue.use( CKEditor, {
-	componentName: 'myEditor'
-} );
-```
-
-Use the new component name in the template to create editor instances:
-
-```html
-<myEditor editor="classic"></myEditor>
-```
-
 ## Component directives
 
 ### `editor`
 
-This directive specifies the editor to be used by the component. It should either:
+This directive specifies the editor to be used by the component. It must directly reference the editor constructor to be used in the template.
+
+```html
+<template>
+		<div id="app">
+			<ckeditor :editor="editor" ... ></ckeditor>
+		</div>
+</template>
 
-* correspond to one of [registered editors](#editors):
-	```js
+<script>
 	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
-	Vue.use( CKEditor, {
-		editors: {
-			classic: ClassicEditor,
+	export default {
+		name: 'app',
+		data() {
+			return {
+				editor: ClassicEditor,
 
-			// ...
-		}
-	} );
-	```
-
-	```html
-	<ckeditor editor="classic"></ckeditor>
-	```
-
-* [directly reference](#local-configuration) the editor to be used in the template:
-	```html
-	<template>
-		 <div id="app">
-			  <ckeditor :editor="editorType" ... ></ckeditor>
-		 </div>
-	</template>
-
-	<script>
-		export default {
-			name: 'app',
-			data() {
-				return {
-					editorType: ClassicEditor,
-
-					// ...
-				};
-			}
+				// ...
+			};
 		}
-	</script>
-	```
+	}
+</script>
+```
 
 <info-box>
 	To use more than one rich text editor build in your application, you will need to configure it [from source](#using-ckeditor-from-source) or use a {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}.
@@ -474,10 +351,10 @@ This directive specifies the editor to be used by the component. It should eithe
 
 ### `tag-name`
 
-By default, the editor component creates a `<div>` container which is used as an element passed tothe 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>
+<ckeditor :editor="editor" tag-name="textarea"></ckeditor>
 ```
 
 ### `v-model`
@@ -491,7 +368,7 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" v-model="editorData"></ckeditor>
+		<ckeditor :editor="editor" v-model="editorData"></ckeditor>
 		<button v-on:click="emptyEditor()">Empty the editor</button>
 
 		<h2>Editor data</h2>
@@ -500,10 +377,13 @@ A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
 	export default {
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				editorData: '<p>Content of the editor.</p>'
 			};
 		},
@@ -527,15 +407,18 @@ Allows a one–way data binding that sets the content of the editor. Unlike [`v-
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" :value="editorData"></ckeditor>
+		<ckeditor :editor="editor" :value="editorData"></ckeditor>
 	</div>
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
 	export default {
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				editorData: '<p>Content of the editor.</p>'
 			};
 		}
@@ -552,15 +435,18 @@ Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration}
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" :config="editorConfig"></ckeditor>
+		<ckeditor :editor="editor" :config="editorConfig"></ckeditor>
 	</div>
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
 	export default {
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				editorConfig: {
 					toolbar: [ 'bold', 'italic', '|' 'link' ]
 				}
@@ -579,15 +465,18 @@ It sets the initial read–only state of the editor and changes it during its li
 ```html
 <template>
 	<div id="app">
-		<ckeditor editor="classic" :disabled="editorDisabled"></ckeditor>
+		<ckeditor :editor="editor" :disabled="editorDisabled"></ckeditor>
 	</div>
 </template>
 
 <script>
+	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+
 	export default {
 		name: 'app',
 		data() {
 			return {
+				editor: ClassicEditor,
 				// This editor will be read–only when created.
 				editorDisabled: true
 			};
@@ -603,7 +492,7 @@ It sets the initial read–only state of the editor and changes it during its li
 Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`} editor event.
 
 ```html
-<ckeditor editor="classic" @ready="onEditorReady"></ckeditor>
+<ckeditor :editor="editor" @ready="onEditorReady"></ckeditor>
 ```
 
 ### `focus`
@@ -611,7 +500,7 @@ Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`}
 Corresponds to the {@link module:engine/view/document~Document#event:focus `focus`} editor event.
 
 ```html
-<ckeditor editor="classic" @focus="onEditorFocus"></ckeditor>
+<ckeditor :editor="editor" @focus="onEditorFocus"></ckeditor>
 ```
 
 ### `blur`
@@ -619,7 +508,7 @@ Corresponds to the {@link module:engine/view/document~Document#event:focus `focu
 Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`} editor event.
 
 ```html
-<ckeditor editor="classic" @blur="onEditorBlur"></ckeditor>
+<ckeditor :editor="editor" @blur="onEditorBlur"></ckeditor>
 ```
 
 ### `input`
@@ -627,7 +516,7 @@ Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`
 Corresponds to the {@link module:engine/model/document~Document#event:change:data `change:data`} editor event. See the [`v-model` directive](#v-model) to learn more.
 
 ```html
-<ckeditor editor="classic" @input="onEditorInput"></ckeditor>
+<ckeditor :editor="editor" @input="onEditorInput"></ckeditor>
 ```
 
 ### `destroy`
@@ -637,7 +526,7 @@ Corresponds to the {@link module:core/editor/editor~Editor#event:destroy `destro
 **Note:** Because the destruction of the editor is promise–driven, this event can be fired before the actual promise resolves.
 
 ```html
-<ckeditor editor="classic" @destroy="onEditorDestroy"></ckeditor>
+<ckeditor :editor="editor" @destroy="onEditorDestroy"></ckeditor>
 ```
 
 ## Contributing and reporting issues