CKEditor in Vue.js

Here, we will learn about CKEditor. CKEditor 4 offers a local Vue mix through the CKEditor 4 Vue part. It gives profound mix of CKEditor 4 and Vue that allows you to utilize the local highlights of the WYSIWYG editorial manager inside a Vue part. The CKEditor 4 Vue segment is viable with Vue.js 2.x.

Lets start the code.

Step 1: Install the following packages in vue.js:

npm install ckeditor4-vue

Step 2: Open main.js and add the following in it:

import CKEditor from 'ckeditor4-vue'
Vue.use(CKEditor)

Step 3: Open App.Vue and add the following in it:

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

<script>
export default {
  name: "App",
  data() {
    return {
      editorData: "<p>Content of the editor.</p>",
      editorConfig: {
        // The configuration of the editor.
      },
    };
  },
};
</script>

Code in Action