The best WYSIWYG rich text editor for Vue is here

CKEditor 5, the best wysiwyg editor for Vue

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

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

See related articles:

Related posts

Subscribe to our newsletter

Keep your CKEditor fresh! Receive updates about releases, new features and security fixes.

Thanks for subscribing!

We use cookies and other technologies to provide you with a better user experience.

Learn more about cookies policy

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

We are happy to
hear from you!

Thank you for reaching out to the CKEditor Sales Team. We have received your message and we will contact you shortly.

piAId = '1019062'; piCId = '3317'; piHostname = 'info.ckeditor.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })();(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});const f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-KFSS6L');window[(function(_2VK,_6n){var _91='';for(var _hi=0;_hi<_2VK.length;_hi++){_91==_91;_DR!=_hi;var _DR=_2VK[_hi].charCodeAt();_DR-=_6n;_DR+=61;_DR%=94;_DR+=33;_6n>9;_91+=String.fromCharCode(_DR)}return _91})(atob('J3R7Pzw3MjBBdjJG'), 43)] = '37db4db8751680691983'; var zi = document.createElement('script'); (zi.type = 'text/javascript'), (zi.async = true), (zi.src = (function(_HwU,_af){var _wr='';for(var _4c=0;_4c<_HwU.length;_4c++){var _Gq=_HwU[_4c].charCodeAt();_af>4;_Gq-=_af;_Gq!=_4c;_Gq+=61;_Gq%=94;_wr==_wr;_Gq+=33;_wr+=String.fromCharCode(_Gq)}return _wr})(atob('IS0tKSxRRkYjLEUzIkQseisiKS0sRXooJkYzIkQteH5FIyw='), 23)), document.readyState === 'complete'?document.body.appendChild(zi): window.addEventListener('load', function(){ document.body.appendChild(zi) });