menu-title: Vue.js component category: builds-integration-frameworks
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 component can also work with custom builds created from source.
Install the CKEditor 5 rich text editor component for Vue.js and the build of your choice.
Assuming that you picked @ckeditor/ckeditor5-build-classic:
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
This is the quickest way to start using CKEditor in your project. Assuming Vue is installed, include the <script> tags for the editor component and the build:
<script src="../node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-vue/dist/ckeditor.js"></script>
Enable the component in your application using the Vue.use method, specifying the editor build you want to use:
Vue.use( CKEditor, {
editors: {
classic: ClassicEditor
}
} );
Check out the [plugin configuration](#plugin-configuration) section to learn more about the available options.
Use the <ckeditor> component in your template:
editor directive specifies the editor build.v-model directive enables an out–of–the–box two–way data binding.The config directive helps you pass the configuration to the editor instance.
<div id="app">
<ckeditor editor="classic" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
const app = new Vue( {
el: '#app',
data: {
editorData: '<p>Content of the editor.</p>',
editorConfig: {
// Configuration of the editor.
}
}
} );
See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
The editor component comes as a UMD module, which makes it possible to use in various environments, for instance, applications generated by Vue CLI, built using webpack, 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 method, specifying the editor builds you want to use:
import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Vue.use( CKEditor, {
editors: {
classic: ClassicEditor
}
} );
Check out the [plugin configuration](#plugin-configuration) section to learn more.
The following example showcases a single–file component of the application. Use the <ckeditor> component in your template:
editor directive specifies the editor build.v-model directive enables an out–of–the–box two–way data binding.The config directive helps you pass the configuration to the editor instance.
<template>
<div id="app">
<ckeditor editor="classic" 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>
See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component.
editorsThis configuration is mandatory and specifies editor builds available to the component. Editors can be either {@link builds/guides/overview ready-to-use editor builds} or custom builds created from source:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import InlineEditor from '@ckeditor/ckeditor5-build-inline';
Vue.use( CKEditor, {
editors: {
classic: ClassicEditor,
inline: InlineEditor,
// ...
}
} );
Use the name of the build in your template to create the editor instance of your choice:
<ckeditor editor="classic"></ckeditor>
<ckeditor editor="inline"></ckeditor>
componentNameYou can change the name of the CKEditor component using the componentName property (by default <ckeditor>):
Vue.use( CKEditor, {
componentName: 'myEditor'
} );
Use the new component name in the template to create editor instances:
<myEditor editor="classic"></myEditor>
editorThis directive is mandatory and specifies the editor build to be used by the component. To work properly, it must correspond to one of registered editor builds:
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import InlineEditor from '@ckeditor/ckeditor5-build-inline';
Vue.use( CKEditor, {
editors: {
classic: ClassicEditor,
inline: InlineEditor,
// ...
}
} );
<!-- The following will create an instance of ClassicEditor. -->
<ckeditor editor="classic"></ckeditor>
<!-- The following will create an instance of InlineEditor. -->
<ckeditor editor="inline"></ckeditor>
tag-nameBy 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:
<ckeditor editor="classic" tag-name="textarea"></ckeditor>
v-modelA standard directive for form inputs in Vue. Unlike value, it creates a two–way data binding, which:
can be used to set editor content when necessary.
<template>
<div id="app">
<ckeditor editor="classic" v-model="editorData"></ckeditor>
<button v-on:click="emptyEditor()">Empty the editor</button>
<h2>Editor data</h2>
<code>{{ editorData }}</code>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
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 event.
valueAllows a one–way data binding that sets the content of the editor. Unlike v-model, the value will not be updated when as the content of the editor changes.
<template>
<div id="app">
<ckeditor editor="classic" :value="editorData"></ckeditor>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
editorData: '<p>Content of the editor.</p>'
};
}
}
</script>
To execute an action when the editor data changes, use the input event.
configSpecifies the {@link module:core/editor/editorconfig~EditorConfig configuration} of the editor.
<template>
<div id="app">
<ckeditor editor="classic" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
editorConfig: {
toolbar: [ 'bold', 'italic', '|' 'link' ]
}
};
}
}
</script>
disabledThis 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.
<template>
<div id="app">
<ckeditor editor="classic" :disabled="editorDisabled"></ckeditor>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
// This editor will be read–only when created.
editorDisabled: true
};
}
}
</script>
readyCorresponds to the {@link module:core/editor/editor~Editor#event:ready ready} editor event.
<ckeditor editor="classic" @ready="onEditorReady"></ckeditor>
focusCorresponds to the {@link module:engine/view/document~Document#event:focus focus} editor event.
<ckeditor editor="classic" @focus="onEditorFocus"></ckeditor>
blurCorresponds to the {@link module:engine/view/document~Document#event:blur blur} editor event.
<ckeditor editor="classic" @blur="onEditorBlur"></ckeditor>
inputCorresponds to the {@link module:engine/model/document~Document#event:change:data change:data} editor event. See the v-model directive to learn more.
<ckeditor editor="classic" @input="onEditorInput"></ckeditor>
destroyCorresponds 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.
<ckeditor editor="classic" @destroy="onEditorDestroy"></ckeditor>
The source code of this component is available on GitHub in https://github.com/ckeditor/ckeditor5-vue.