Integrating CKEditor 5 with Vue.js 3+ from CDN

CKEditor 5 has an official Vue integration that you can use to add a rich text editor to your application. This guide will help you install it and configure to use the CDN distribution of the CKEditor 5.

This guide assumes that you already have a Vue project. If you do not have one, see the Vue documentation to learn how to create it.

Start by installing the Vue integration for CKEditor 5 from npm:

npm install @ckeditor/ckeditor5-vue

Once the integration is installed, create a new Vue component called Editor.vue. It will use the useCKEditorCloud helper to load the editor code from the CDN and the <ckeditor> component to run it, both of which come from the above package. The following example shows a single file component with open source and premium CKEditor 5 plugins.

<template>
    <ckeditor
        v-if="editor"
        v-model="data"
        :editor="editor"
        :config="config"
    />
</template>

<script setup>
import { ref, computed } from 'vue';
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
    version: '46.0.0',
    premium: true
} );

const data = ref( '<p>Hello world!</p>' );

const editor = computed( () => {
    if ( !cloud.data.value ) {
        return null;
    }

    return cloud.data.value.CKEditor.ClassicEditor;
} );

const config = computed( () => {
        if ( !cloud.data.value ) {
        return null;
    }

    const { Essentials, Paragraph, Bold, Italic } = cloud.data.value.CKEditor;
    const { FormatPainter } = cloud.data.value.CKEditorPremiumFeatures;

    return {
        licenseKey: '<YOUR_LICENSE_KEY>',
        plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
        toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
    };
} );
</script>

In the above example, the useCKEditorCloud helper is used to load the editor code and plugins from CDN. The premium option is set to also load premium plugins. For more information about the useCKEditorCloud helper, see the Loading CDN resources guide.

Now, you can import and use the Editor.vue component anywhere in your application.

<template>
    <Editor />
</template>

If you use Nuxt.js with server-side rendering enabled, remember to wrap the <Editor> component in the <ClientOnly> component to avoid issues with the editor calling browser-specific APIs on the server.

<template>
    <ClientOnly>
        <Editor />
    </ClientOnly>
</template>

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>

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

A standard directive for form inputs in Vue. Unlike model-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>
    <ckeditor :editor="editor" v-model="data" />
    <button @click="emptyEditor">Empty the editor</button>

    <h2>Editor data</h2>
    <code>{{ data }}</code>
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const data = ref( '<p>Hello world!</p>' );

function emptyEditor() {
    data.value = '';
}
</script>

In the above example, the data property will be updated automatically as the user types and the content changes. 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.

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" :model-value="data" />
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const data = ref( '<p>Hello world!</p>' );
</script>

To execute an action when the editor data changes, use the input event.

Specifies the configuration of the editor.

<template>
    <ckeditor :editor="editor" :config="config" />
</template>

<script setup>
import { computed } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const config = computed( () => {
    const { Essentials, Paragraph, Bold, Italic } = cloud.data.value.CKEditor;
    const { FormatPainter } = cloud.data.value.CKEditorPremiumFeatures;

    return {
        licenseKey: '<YOUR_LICENSE_KEY>',
        plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
        toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
    };
} );
</script>

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="disabled" />
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const disabled = ref( true );
</script>

Allows disabling the two-way data binding mechanism. The default value is false.

The reason for introducing this option is performance issues in large documents. After enabling this flag, the v-model directive will no longer update the connected value whenever the editor’s data is changed.

This option allows the integrator to disable the default behavior and only call the editor.getData() method on demand, which prevents the slowdowns. You can read more in the relevant issue.

<template>
    <ckeditor :editor="editor" :disableTwoWayDataBinding="disableTwoWayDataBinding" />
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const disableTwoWayDataBinding = ref( true );
</script>

Corresponds to the ready editor event.

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

Corresponds to the focus editor event.

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

Corresponds to the blur editor event.

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

Corresponds to the change:data editor event.

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

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

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>
    <ckeditor
        v-if="editor"
        v-model="data"
        :editor="editor"
        :config="config"
        @ready="onReady"
    />
</template>

<script setup>
import { ref, computed } from 'vue';
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
    version: '46.0.0'
} );

const data = ref( '<p>Hello world!</p>' );

const editor = computed( () => {
    if ( !cloud.data.value ) {
        return null;
    }

    return cloud.data.value.CKEditor.ClassicEditor;
} );

const config = computed( () => {
    if ( !cloud.data.value ) {
        return null;
    }

    const { Essentials, Paragraph, Bold, Italic, Mention } = cloud.data.value.CKEditor;
    const { SlashCommand } = cloud.data.value.CKEditorPremiumFeatures;

    return {
        licenseKey: '<YOUR_LICENSE_KEY>',
        toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ],
        plugins: [
            Essentials,
            Paragraph,
            Bold,
            Italic,
            Mention,
            SlashCommand
        ]
    };
} );

function onReady( editor ) {
    // Insert the toolbar before the editable area.
    editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
    );
}
</script>

We provide a ready-to-use integration featuring collaborative editing in a Vue application:

• CKEditor 5 with real-time collaboration features

It is not mandatory to build applications on top of the above sample, however, it should help you get started.

CKEditor 5 supports multiple UI languages, and so does the official Vue component. To translate the editor, pass the languages you need into the translations array inside the configuration of the useCKEditorCloud function.

<script setup>
import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
    version: '46.0.0',
    translations: [ 'es' ]
} );
</script>

The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. To do so, import the component and its types using an import type statement from a special package containing type definitions. Take a look at the following example:

<script setup>
import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue';
import type { ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';

const cloud = useCKEditorCloud( {
    version: '46.0.0',
    translations: [ 'es' ]
} );

const TestEditor = computed<typeof ClassicEditor | null>( () => {
    if ( !cloud.data.value ) {
        return null;
    }

    const {
        ClassicEditor: BaseEditor,
        Paragraph,
        Essentials,
        Heading,
        Bold,
        Italic
    } = cloud.data.value.CKEditor;

    return class TestEditor extends BaseEditor {
        static builtinPlugins = [
            Essentials,
            Paragraph,
            Heading,
            Bold,
            Italic
        ];
    };
} );
</script>

In the example above, the ClassicEditor type is imported from the https://cdn.ckeditor.com/typings/ckeditor5.d.ts package, while the editor itself loads from the CDN. Note that https://cdn.ckeditor.com/typings/ckeditor5.d.ts is not an actual URL to the CKEditor 5 types file but a synthetic TypeScript module providing type definitions for the editor. The ckeditor5 package supplies the actual typings, which depend on the @ckeditor/ckeditor5-react package.

Although this setup might seem complex, it prevents users from directly importing anything from the ckeditor5 package, which could lead to duplicated code issues.

If you want to use types for premium features, you can import them similarly to the base editor types. Remember that you need to install the ckeditor5-premium-features package to use them. You can do it by running the following command:

npm install --save-dev ckeditor5-premium-features

After installing the package, you can import the types in the following way:

<script setup>
// ...
import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium-features.d.ts';
// ...
</script>

While type definitions for the base editor should be available out of the box, some bundlers do not install the ckeditor5 package, which provides typing for the editor. If you encounter any issues with the type definitions, you can install the ckeditor5 package manually:

npm install --save-dev ckeditor5

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

• See how to manipulate the editor’s data in the Getting and setting data guide.
• Refer to further guides in the setup section to see how to customize your editor further.
• Check the features category to learn more about individual features.