« See all

The best WYSIWYG editor for Vue.js is here

We are happy to announce the release of the native integration of CKEditor 5 with Vue.js, the progressive JavaScript framework. This brings the number of available CKEditor 5 rich-text editor integrations with popular frameworks to three:

We want to make installing and integrating CKEditor 5 as simple and intuitive as possible. Therefore, CKEditor 5 builds are available on npm, CDN and as zip packages. Building native integrations with the most popular JavaScript frameworks is the next step into this direction.

# Is CKEditor 5 compatible with framework XYZ?

Yes. CKEditor 5 is compatible with every JavaScript framework that we have heard of so far. CKEditor 5 is a JavaScript rich-text editing component and it does not require any uncommon techniques or technologies to be used. Therefore, unless the framework that you use has very not typical limitations, CKEditor 5 is compatible with it.

With native components for Vue.js, React and Angular 2+ we want to make the process of integrating our rich-text editor even faster. Let’s see how you can use CKEditor 5 with Vue.js in your project!

# WYSIWYG editor for Vue.js

The easiest way to use CKEditor 5 in your Vue.js application is to install @ckeditor/ckeditor5-vue and one of the CKEditor 5 Builds:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Enable the component globally in your application:

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

Vue.use( CKEditor );

Then use it in your .vue file to create an editor instance:

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

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Rich-text editor content.</p>',
                editorConfig: {
                    // The configuration of the rich-text editor.
                }
            };
        }
    }
</script>

You can also use the component with Vue CLI or simply load it from the CDN. You can learn more about the different methods to integrate CKEditor 5 with your Vue.js application in the CKEditor 5 rich text editor component for Vue.js guide.

# Feedback

We want to thank the community for all the comments and issues reported for the beta version of the Vue.js component. Please keep them coming and help us improve the integration!

At the same time, we are looking forward to hearing what other frameworks we should support with a native CKEditor 5 rich-text editor integration.

# Curious about more?

If you would like to learn more about CKEditor 5 technology, we recently published an article about lessons learned from creating a rich-text editor with real-time collaboration.

You can also read about the latest CKEditor 5 release which introduced paste from Word and integration with the CKFinder file manager and uploader.

Share this post

Linkedin Reddit
CKEditor 4.11.2 released
CKEditor 5 v11.2.0 with paste from Word and file manager support released