# Integrating CKeditor 5 with Vue.js 2.x from npm

> **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 [Vue.js 3+ rich text editor component](vue/vue-default-npm.md) guide.

You can use the CKEditor 5 Vue 2 component to add a rich text editor to your application. This guide will help you install and configure the npm distribution of CKEditor 5.

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="quick-start">

## Quick start

This guide assumes you already have a Vue project. First, install the CKEditor 5 packages:

* `ckeditor5` – package with open-source plugins and features.
* `ckeditor5-premium-features` – package with premium plugins and features.

```bash
npm install ckeditor5 ckeditor5-premium-features
```

Depending on your configuration and chosen plugins, you may need to install the first or both packages.

Then, install the [CKEditor 5 WYSIWYG editor component for Vue 2](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue2):

```bash
npm install @ckeditor/ckeditor5-vue2
```

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`).

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from npm:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

```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.

```vue
<template>
	<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" />
</template>

<script>
import { ClassicEditor, Essentials, Paragraph, Bold, Italic } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

export default {
	name: 'app',
	data() {
		return {
			editor: ClassicEditor,
			editorData: '<p>Hello from CKEditor 5 in Vue 2!</p>',
			editorConfig: {
				licenseKey: '<YOUR_LICENSE_KEY>',
				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
			}
		};
	}
};
</script>
```

<a id="using-the-component-locally">

### Using the component locally

If you do not want the CKEditor component to be enabled globally, you can skip the `Vue.use( CKEditor )` part entirely. Instead, configure it in the `components` property of your view.

```vue
<template>
	<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" />
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2';
import { Bold, ClassicEditor, Essentials, Italic, Paragraph } from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';

export default {
	name: 'app',
	components: {
		ckeditor: CKEditor.component
	},
	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, Paragraph ],
				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ]
			}
		};
	}
};
</script>
```

<a id="component-directives">

## Component directives

<a id="editor">

### `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.

```vue
<template>
	<ckeditor :editor="editor" />
</template>

<script>
	import { ClassicEditor } from 'ckeditor5';

	export default {
		name: 'app',
		data() {
			return {
				editor: ClassicEditor,

				// ...
			};
		}
	};
</script>
```

<a id="tag-name">

### `tag-name`

By default, the editor component creates a `<div>` container which is used as an element passed to the editor (for example, [`ClassicEditor#element`](../../../api/module_editor-classic_classiceditorui-ClassicEditorUI.md#member-element)). The element can be configured, so for example to create a `<textarea>`, use the following directive:

```vue
<ckeditor :editor="editor" tag-name="textarea" />
```

<a id="v-model">

### `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.

```vue
<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>
	import { ClassicEditor } from 'ckeditor5';

	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.

<a id="value">

### `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.

```vue
<template>
	<ckeditor :editor="editor" :value="editorData" />
</template>

<script>
	import { ClassicEditor } from 'ckeditor5';

	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.

<a id="config">

### `config`

Specifies the [configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md) of the editor.

```vue
<template>
	<ckeditor :editor="editor" :config="editorConfig" />
</template>

<script>
	import { ClassicEditor } from 'ckeditor5';

	export default {
		name: 'app',
		data() {
			return {
				editor: ClassicEditor,
				editorConfig: {
					toolbar: [ 'bold', 'italic', '|', 'link' ]
				}
			};
		}
	};
</script>
```

<a id="disabled">

### `disabled`

This directive controls the [`isReadOnly`](../../../api/module_core_editor_editor-Editor.md#member-isReadOnly) property of the editor.

It sets the initial read–only state of the editor and changes it during its lifecycle.

```vue
<template>
	<ckeditor :editor="editor" :disabled="editorDisabled" />
</template>

<script>
	import { ClassicEditor } from 'ckeditor5';

	export default {
		name: 'app',
		data() {
			return {
				editor: ClassicEditor,
				// This editor will be read–only when created.
				editorDisabled: true
			};
		}
	};
</script>
```

<a id="component-events">

## Component events

<a id="ready">

### `ready`

Corresponds to the [`ready`](../../../api/module_core_editor_editor-Editor.md#event-ready) editor event.

```vue
<ckeditor :editor="editor" @ready="onEditorReady" />
```

<a id="focus">

### `focus`

Corresponds to the [`focus`](../../../api/module_engine_view_document-ViewDocument.md#event-focus) editor event.

```vue
<ckeditor :editor="editor" @focus="onEditorFocus" />
```

<a id="blur">

### `blur`

Corresponds to the [`blur`](../../../api/module_engine_view_document-ViewDocument.md#event-blur) editor event.

```vue
<ckeditor :editor="editor" @blur="onEditorBlur" />
```

<a id="input">

### `input`

Corresponds to the [`change:data`](../../../api/module_engine_model_document-ModelDocument.md#event-change:data) editor event. See the [`v-model` directive](#v-model) to learn more.

```vue
<ckeditor :editor="editor" @input="onEditorInput" />
```

<a id="destroy">

### `destroy`

Corresponds to the [`destroy`](../../../api/module_core_editor_editor-Editor.md#event-destroy) editor event.

**Note:** Because the destruction of the editor is promise–driven, this event can be fired before the actual promise resolves.

```vue
<ckeditor :editor="editor" @destroy="onEditorDestroy" />
```

<a id="how-to">

## How to?

<a id="using-the-document-editor-type">

### Using the Document editor type

If you use the [Document (decoupled) editor](../../../framework/deep-dive/ui/document-editor.md) in your application, you need to [manually add the editor toolbar to the DOM](../../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md#static-function-create).

Since accessing the editor toolbar is not possible until after the editor instance is [ready](../../../api/module_core_editor_editor-Editor.md#event-ready), put your toolbar insertion code in a method executed upon the [`ready`](#ready) event of the component, like in the following example:

```vue
<template>
	<ckeditor :editor="editor" @ready="onReady" />
</template>

<script>
	import { DecoupledEditor, Bold, Essentials, Italic, Paragraph } from 'ckeditor5';

	import 'ckeditor5/ckeditor5.css'

	export default {
		name: 'app',
		data() {
			return {
				editor: DecoupledEditor,
				// ...
			};
		},
		methods: {
			onReady( editor )  {
				// Insert the toolbar before the editable area.
				editor.ui.getEditableElement().parentElement.insertBefore(
					editor.ui.view.toolbar.element,
					editor.ui.getEditableElement()
				);
			}
		}
	};
</script>
```

<a id="localization">

### Localization

CKEditor 5 supports [multiple UI languages](../../setup/ui-language.md), and so does the official Vue 2 component. Follow the instructions below to translate CKEditor 5 in your Vue application.

Similarly to CSS style sheets, both packages have separate translations. Import them as shown in the example below. Then, pass them to the `translations` array inside the `editorConfig` prop in the component.

```vue
<template>
	<ckeditor :editor="editor" v-model="editorData" :config="editorConfig" />
</template>

<script>
import { ClassicEditor, Bold, Essentials, Italic, Paragraph } from 'ckeditor5';
// More imports...

import coreTranslations from 'ckeditor5/translations/es.js';
import premiumFeaturesTranslations from 'ckeditor5-premium-features/translations/es.js';

export default {
	name: 'app',
	data() {
		return {
			editor: ClassicEditor,
			editorData: '<p>Hola desde CKEditor 5 en Vue 2!</p>',
			editorConfig: {
				// ... Other configuration options ...
				translations: [ coreTranslations, premiumFeaturesTranslations ]
			}
		};
	}
};
</script>
```

For more information, refer to the [“Setting UI language”](../../setup/ui-language.md) guide.

<a id="contributing-and-reporting-issues">

## Contributing and reporting issues

The source code of this component is available on GitHub in <https://github.com/ckeditor/ckeditor5-vue2>.

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)