Vue.js 2.x rich text editor component

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 “Rich text editor component for Vue.js 3+” guide.

Vue.js is a versatile framework for building web user interfaces. CKEditor 5 provides the official Vue component you can use in your application.

CKEditor 5 Builder

In our interactive Builder you can 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. You can easily select:

The editor type.
The features you need.
Preferred framework (React, Angular, Vue or Vanilla JS).
Preferred distribution method.

At the end you get ready-to-use code tailored to your needs!

Check out our interactive Builder

# Quick start

# Installing from npm

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.

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:

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

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';
import App from './App.vue';

Vue.use( CKEditor );

new Vue( { render: ( h ) => h( 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.

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</template>

<script>
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo } from 'ckeditor5';
import { SlashCommand } 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: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                 },
                plugins: [
                    Bold, Essentials, Italic, Mention, Paragraph, SlashCommand, Undo
                ],
                licenseKey: '<YOUR_LICENSE_KEY>',
                mention: { 
                    // Mention configuration
                }
            }
        };
    }
};
</script>

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

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</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: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [ Bold, Essentials, Italic, Paragraph ],
            }
        };
    }
};
</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.

<template>
        <div id="app">
            <ckeditor :editor="editor" ></ckeditor>
        </div>
</template>

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

    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, ClassicEditor#element). The element can be configured, so for example to create a <textarea>, use the following directive:

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

# `v-model`

A standard directive for form inputs in Vue. Unlike 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.

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData"></ckeditor>
        <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 event.

# `value`

Allows a one–way data binding that sets the content of the editor. Unlike v-model, the value will not be updated when the content of the editor changes.

<template>
    <div id="app">
        <ckeditor :editor="editor" :value="editorData"></ckeditor>
    </div>
</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 event.

# `config`

Specifies the configuration of the editor.

<template>
    <div id="app">
        <ckeditor :editor="editor" :config="editorConfig"></ckeditor>
    </div>
</template>

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

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

# `disabled`

This directive controls the 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="editor" :disabled="editorDisabled"></ckeditor>
    </div>
</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>

# Component events

# `ready`

Corresponds to the ready editor event.

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

# `focus`

Corresponds to the focus editor event.

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

# `blur`

Corresponds to the blur editor event.

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

# `input`

Corresponds to the change:data editor event. See the v-model directive to learn more.

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

# `destroy`

Corresponds to the 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="editor" @destroy="onEditorDestroy"></ckeditor>

# How to?

# Using the Document editor type

If you use the Document (decoupled) editor in your application, you need to manually add the editor toolbar to the DOM.

Since accessing the editor toolbar is not possible until after the editor instance is ready, put your toolbar insertion code in a method executed upon the ready event of the component, like in the following example:

<template>
    <div id="app">
        <ckeditor :editor="editor" @ready="onReady" ></ckeditor>
    </div>
</template>

<script>
    import { DecoupledEditor, Bold, Essentials, Italic, Paragraph, Undo } 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>

# Localization

CKEditor 5 supports multiple UI languages, 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.

<template>
    <div id="app">
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
</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';

// Style sheets imports...

export default {
    name: 'app',
    data() {
        return {
            editor: ClassicEditor,
            editorData: '<p>Hola desde CKEditor 5 en Vue 2!</p>',
            editorConfig: {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [ Bold, Essentials, Italic, Paragraph ],
                translations: [ coreTranslations, premiumFeaturesTranslations ]
            }
        };
    }
};
</script>

For more information, refer to the “Setting UI language” guide.

# Contributing and reporting issues

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

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.

Vue.js 2.x rich text editor component

CKEditor 5 Builder

# Quick start

# Installing from npm

# Using the component locally

# Component directives

# editor

# tag-name

# v-model

# value

# config

# disabled

# Component events

# ready

# focus

# blur

# input

# destroy

# How to?

# Using the Document editor type

# Localization

# Contributing and reporting issues

# `editor`

# `tag-name`

# `v-model`

# `value`

# `config`

# `disabled`

# `ready`

# `focus`

# `blur`

# `input`

# `destroy`