Versatile
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
An adaptable ecosystem capable of handling end-to-end document editing, interoperability with third-party tools, document management, and collaboration.
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.
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
Here is a quick example of how to use the Vue Rich Text Editor
component for CKEditor5 by using create-vue!
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-example
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-classic
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="//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>
Run the app by executing the following command in your project's directory.
npm run dev
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.