CKEditor 5 - Vue 2

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

`, use the following directive:

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

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

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.

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

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 [configuration](../../../api/module_core_editor_editorconfig-EditorConfig.md) of the editor.

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

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

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

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 [`ready`](../../../api/module_core_editor_editor-Editor.md#event-ready) editor event.

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

### `focus`

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

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

### `blur`

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

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

### `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" />
```

### `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" />
```

## 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)