|
|
@@ -8,9 +8,13 @@ order: 40
|
|
|
|
|
|
[](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
|
|
|
|