CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Getting started

Vue.js 2.x rich text editor component

npm version

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.

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.

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

To use our Cloud CDN services, create a free account. Learn more about license key activation.

First, install the CKEditor 5 WYSIWYG editor component for Vue 2:

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.

<!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/44.0.0/ckeditor5.css" />
        <script src="https://cdn.ckeditor.com/ckeditor5/44.0.0/ckeditor5.umd.js"></script>
        <!-- Add if you use premium features -->
        <link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5-premium-features/44.0.0/ckeditor5-premium-features.css" />
        <script src="https://cdn.ckeditor.com/ckeditor5-premium-features/44.0.0/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).

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.

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

<script>
const {
    ClassicEditor,
    Essentials,
    Bold,
    Italic,
    Paragraph,
} = CKEDITOR;
const { FormatPainter } = 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>',
                plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
                toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
            }
        };
    }
};
</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>
    <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, ClassicEditor#element). The element can be configured, so for example to create a <textarea>, use the following directive:

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

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

# config

Specifies the configuration of the editor.

<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 isReadOnly property of the editor.

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

<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 ready editor event.

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

# focus

Corresponds to the focus editor event.

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

# blur

Corresponds to the blur editor event.

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

# input

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

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

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