CKEditor 4 - Integrate WYSIWYG editor with Vue.js
<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.
# Is CKEditor 4 compatible with framework XYZ?
# 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
import CKEditor from 'ckeditor4-vue';
And enabled via a
Vue.use( CKEditor );
<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>
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!
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.
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.