-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #17117 from ckeditor/ck/melman/vue2
Docs: Add Vue 2 integrations
- Loading branch information
Showing
7 changed files
with
726 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,309 @@ | ||
| --- | ||
| menu-title: Vue.js 2.x | ||
| meta-title: Vue.js 2.x rich text editor component with CDN | CKEditor 5 documentation | ||
| meta-description: Install, integrate and configure CKEditor 5 using the Vue.js 2.x component with CDN. | ||
| category: cloud | ||
| order: 40 | ||
| --- | ||
|
|
||
| {@snippet installation/integrations/framework-integration} | ||
|
|
||
| # Vue.js 2.x rich text editor component | ||
|
|
||
| <p> | ||
| <a href="https://www.npmjs.com/package/@ckeditor/ckeditor5-vue2" target="_blank" rel="noopener"> | ||
| <img src="https://badge.fury.io/js/%40ckeditor%2Fckeditor5-vue2.svg" alt="npm version" loading="lazy"> | ||
| </a> | ||
| </p> | ||
|
|
||
| <info-box warning> | ||
| This guide is about the CKEditor 5 integration with Vue.js 2.x. However, Vue 2 has reached EOL and is no longer actively maintained. To learn more about the integration with Vue.js 3+, check out the {@link getting-started/integrations-cdn/vuejs-v3 Rich text editor component for Vue.js 3+} guide. | ||
| </info-box> | ||
|
|
||
| You can use CKEditor 5 Vue 2 component to add a rich text editor to your application. This guide will help you install and configure the CDN distribution of the CKEditor 5. | ||
|
|
||
| {@snippet getting-started/use-builder} | ||
|
|
||
| ## Quick start | ||
|
|
||
| First, install the CKEditor 5 WYSIWYG editor component for Vue 2: | ||
|
|
||
| ```bash | ||
| npm install @ckeditor/ckeditor5-vue2 | ||
| ``` | ||
|
|
||
| Then, include the CKEditor 5 scripts and styles. All necessary scripts and links are shown in the HTML snippet below. You can copy and paste them into your `index.html` file. Open-source and premium features are in separate files, so there are different tags for both types of plugins. Add tags for premium features only if you use them. | ||
|
|
||
| ```html | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" href="/favicon.ico" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
|
|
||
| <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.css" /> | ||
| <script src="https://cdn.ckeditor.com/ckeditor5/{@var ckeditor5-version}/ckeditor5.umd.js"></script> | ||
| <!-- Add if you use premium features --> | ||
| <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.css" /> | ||
| <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/{@var ckeditor5-version}/ckeditor5-premium-features.umd.js"></script> | ||
|
|
||
| <title>CKEditor 5 - Vue 2</title> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script type="module" src="/src/main.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| To create an editor instance, you must first import the editor and the component modules into the root file of your application (for example, `main.js` when generated by create-vue). | ||
|
|
||
| ```js | ||
| import Vue from 'vue'; | ||
| import CKEditor from '@ckeditor/ckeditor5-vue2'; | ||
| import App from './App.vue'; | ||
|
|
||
| Vue.use( CKEditor ); | ||
|
|
||
| new Vue( App ).$mount( '#app' ); | ||
| ``` | ||
|
|
||
| Use the `<ckeditor>` component inside the template tag. The below example shows how to use the component with open-source and premium plugins. To make it work, you need to provide a proper license key. | ||
|
|
||
| ```html | ||
| <template> | ||
| <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { | ||
| ClassicEditor, | ||
| Essentials, | ||
| Bold, | ||
| Italic, | ||
| Paragraph, | ||
| Mention | ||
| } = CKEDITOR; | ||
| const { SlashCommand } = CKEDITOR_PREMIUM_FEATURES; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| editorData: '<p>Hello from CKEditor 5 in Vue 2!</p>', | ||
| editorConfig: { | ||
| licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'. | ||
| plugins: [ Bold, Essentials, Italic, Mention, Paragraph, SlashCommand ], | ||
| toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ], | ||
| mention: { | ||
| // Mention configuration | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| ## Component directives | ||
|
|
||
| ### `editor` | ||
|
|
||
| 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> | ||
| <ckeditor :editor="editor" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { ClassicEditor } = CKEDITOR; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| // ... | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| ### `tag-name` | ||
|
|
||
| By default, the editor component creates a `<div>` container which is used as an element passed to the editor (for example, {@link module:editor-classic/classiceditorui~ClassicEditorUI#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" /> | ||
| ``` | ||
|
|
||
| ### `v-model` | ||
|
|
||
| A [standard directive](https://vuejs.org/v2/api/#v-model) for form inputs in Vue. Unlike [`value`](#value), it creates a two–way data binding, which: | ||
|
|
||
| * Sets the initial editor content. | ||
| * Automatically updates the state of the application as the editor content changes (for example, as the user types). | ||
| * Can be used to set the editor content when necessary. | ||
|
|
||
| ```html | ||
| <template> | ||
| <div> | ||
| <ckeditor :editor="editor" v-model="editorData" /> | ||
| <button v-on:click="emptyEditor()">Empty the editor</button> | ||
|
|
||
| <h2>Editor data</h2> | ||
| <code>{{ editorData }}</code> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { ClassicEditor } = CKEDITOR; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| editorData: '<p>Content of the editor.</p>' | ||
| }; | ||
| }, | ||
| methods: { | ||
| emptyEditor() { | ||
| this.editorData = ''; | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| In the above example, the `editorData` property will be updated automatically as the user types and changes the content. It can also be used to change (as in `emptyEditor()`) or set the initial content of the editor. | ||
|
|
||
| If you only want to execute an action when the editor data changes, use the [`input`](#input) event. | ||
|
|
||
| ### `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 the content of the editor changes. | ||
|
|
||
| ```html | ||
| <template> | ||
| <ckeditor :editor="editor" :value="editorData" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { ClassicEditor } = CKEDITOR; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| editorData: '<p>Content of the editor.</p>' | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| To execute an action when the editor data changes, use the [`input`](#input) event. | ||
|
|
||
| ### `config` | ||
|
|
||
| Specifies the {@link module:core/editor/editorconfig~EditorConfig configuration} of the editor. | ||
|
|
||
| ```html | ||
| <template> | ||
| <ckeditor :editor="editor" :config="editorConfig" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { ClassicEditor } = CKEDITOR; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| editorConfig: { | ||
| toolbar: [ 'bold', 'italic', '|', 'link' ] | ||
| } | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| ### `disabled` | ||
|
|
||
| This directive controls the {@link module:core/editor/editor~Editor#isReadOnly `isReadOnly`} property of the editor. | ||
|
|
||
| It sets the initial read–only state of the editor and changes it during its lifecycle. | ||
|
|
||
| ```html | ||
| <template> | ||
| <ckeditor :editor="editor" :disabled="editorDisabled" /> | ||
| </template> | ||
|
|
||
| <script> | ||
| const { ClassicEditor } = CKEDITOR; | ||
| export default { | ||
| name: 'app', | ||
| data() { | ||
| return { | ||
| editor: ClassicEditor, | ||
| // This editor will be read–only when created. | ||
| editorDisabled: true | ||
| }; | ||
| } | ||
| }; | ||
| </script> | ||
| ``` | ||
|
|
||
| ## Component events | ||
|
|
||
| ### `ready` | ||
|
|
||
| Corresponds to the {@link module:core/editor/editor~Editor#event:ready `ready`} editor event. | ||
|
|
||
| ```html | ||
| <ckeditor :editor="editor" @ready="onEditorReady" /> | ||
| ``` | ||
|
|
||
| ### `focus` | ||
|
|
||
| Corresponds to the {@link module:engine/view/document~Document#event:focus `focus`} editor event. | ||
|
|
||
| ```html | ||
| <ckeditor :editor="editor" @focus="onEditorFocus" /> | ||
| ``` | ||
|
|
||
| ### `blur` | ||
|
|
||
| Corresponds to the {@link module:engine/view/document~Document#event:blur `blur`} editor event. | ||
|
|
||
| ```html | ||
| <ckeditor :editor="editor" @blur="onEditorBlur" /> | ||
| ``` | ||
|
|
||
| ### `input` | ||
|
|
||
| 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="editor" @input="onEditorInput" /> | ||
| ``` | ||
|
|
||
| ### `destroy` | ||
|
|
||
| Corresponds to the {@link module:core/editor/editor~Editor#event:destroy `destroy`} editor event. | ||
|
|
||
| **Note:** Because the destruction of the editor is promise–driven, this event can be fired before the actual promise resolves. | ||
|
|
||
| ```html | ||
| <ckeditor :editor="editor" @destroy="onEditorDestroy" /> | ||
| ``` |
Oops, something went wrong.