Versatile
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
Extensible
Modular architecture where everything is a plugin. You can tune up, add, or remove plugins as you wish. Use custom processors to handle HTML, Markdown, or JSON output.
Progressive
Takes advantage of a superb team of 50+ industry experts and 20+ years of experience in WYSIWYG editing. We are releasing new features every month.
Trusted and approved by
Simple setup
Here is a quick example of how to use the Vue Rich Text Editor component for CKEditor5 by using create-vue!
1
Create a project
Create a project using a basic create-vue template and change the working directory to a newly created project.
npm init vue@latest ckeditor5-vue-example && cd ckeditor5-vue-example2
Install packages
Install dependencies to Rich Text Editor Vue Component and a chosen Editor Type according to editing experience of your preference. In this case, we use the classic one.
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic3
Add component
Replace contents of src/App.vue with code responsible for importing and the initialization of the editor.
<template>
<header class="inverted">
<h2>CKEditor 5 Classic in Vue</h2>
</header>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" @ready="onReady" @input="onChange"></ckeditor>
</div>
<section class="inverted">
<p>Edit <code>src/App.vue</code> and save to reload.</p>
<a href="https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/vuejs-v3.html">See docs</a>
</section>
</template>
<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CKEditor from "@ckeditor/ckeditor5-vue"
export default {
name: 'app',
components: {
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorData: "<p>Hello from CKEditor 5!</p>"
};
},
methods: {
onReady( editor ) {
console.log( "CKEditor5 Vue Component is ready to use!", editor );
},
onChange( data ) {
console.log( data );
}
}
}
</script>
4
Done!
That’s it! Run the app by executing the following command in your project's directory.
npm run dev