Webinar: Level Up Your Drupal Content Editing with CKEditor Features

Sign up

Vue Rich Text Editor

Vue Rich Text Editor is the official CKEditor5 Vue component. The component exposes properties for quick integration of the WYSIWYG editor into Vue-based applications.

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.

Simple setup

Here is a quick example of how to use the Vue Rich Text Editor
component for CKEditor 5 by using Vite!

1

Create a project

Create a project using a basic Vite template and change
the working directory to a newly created project.

npm create vite@latest ckeditor5-vue -- --template vue && cd ckeditor5-vue
2

Install packages

Install dependencies to Vue Text Editor Component and a chosen Editor Type
according to the editing experience of your preference. In this case, we use the classic one.

npm install ckeditor5 @ckeditor/ckeditor5-vue
3

Add component

Replace contents of src/App.vue with code responsible for importing and the initialization of the editor.

<script>
  import CKEditor from '@ckeditor/ckeditor5-vue';
  import {
    ClassicEditor,
    Bold,
    Essentials,
    Heading,
    Indent,
    IndentBlock,
    Italic,
    Link,
    List,
    MediaEmbed,
    Paragraph,
    Table,
    Undo
  } from 'ckeditor5';

  import 'ckeditor5/ckeditor5.css';

  export default {
    name: 'app',
    components: {
      ckeditor: CKEditor.component
    },
    data() {
      return {
        editor: ClassicEditor,
        editorData: '<h1>Hello from CKEditor 5!</h1>',
        editorConfig: {
          toolbar: [
            'undo', 'redo', '|',
            'heading', '|', 'bold', 'italic', '|',
            'link', 'insertTable', 'mediaEmbed', '|',
            'bulletedList', 'numberedList', 'indent', 'outdent'
          ],
          plugins: [
            Bold,
            Essentials,
            Heading,
            Indent,
            IndentBlock,
            Italic,
            Link,
            List,
            MediaEmbed,
            Paragraph,
            Table,
            Undo
          ],
        }
      };
    }
  }
</script>

<template>
  <div id="app">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>
4

Done!

Run the app by executing the following command
in your project's directory.

npm run dev
5

Explore the documentation

Congratulations on setting up CKEditor! To make the most of it, visit the CKEditor documentation
for comprehensive guidance on how to fully customize and integrate the editor.

Trusted and approved by

Want to learn more about CKEditor?

Hi there, any questions about products or pricing?

Questions about our products or pricing?

Contact our Sales Representatives.

Form content fields

Form submit

Hidden unused field.

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.

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