The best WYSIWYG rich text editor for Vue 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:

• CKEditor 5 WYSIWYG editor component for Angular 2+
• CKEditor 5 WYSIWYG editor component for React
• CKEditor 5 WYSIWYG editor component for Vue.js

We want to make installing and integrating CKEditor 5 - the best open source Markdown editor - as simple and intuitive as possible for every developer. 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 in this direction.

# Is CKEditor 5 compatible with framework XYZ?

Yes. CKEditor 5 is customizable and 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, 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 lightweight 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 enable a Vue WYSIWYG editor - or 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 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.

See related articles:

• Build a WYSIWYG editor in-house or use an off-the-shelf solution?
• How to successfully launch a software application on Product Hunt in 2020?
• GitHub Writer: challenge accepted!
• Programming can affect software developers' brains. Learn how!
• What to consider when choosing the best WYSIWYG HTML editor
• A simple on-the-go online HTML editor