vue-ckeditor

Ckeditor using for Vue.js 2

Requirements

Ckeditor >= 4
Vue.js >= 2

Install

CDN

<script src="https://unpkg.com/vue-ckeditor2"></script>

NPM

$ npm install vue-ckeditor2 --save

Usage

This document applies to v2.0+. If you are looking for older versions, docs are here

Component

Then in your component:

<template>
  <div>
    <vue-ckeditor 
      v-model="content" 
      :config="config" 
      @blur="onBlur($event)" 
      @focus="onFocus($event)"
      @contentDom="onContentDom($event)"
      @dialogDefinition="onDialogDefinition($event)"
      @fileUploadRequest="onFileUploadRequest($event)"
      @fileUploadResponse="onFileUploadResponse($event)" />
  </div>
</template>

<script>
import VueCkeditor from 'vue-ckeditor2';

export default {
  components: { VueCkeditor },
  data() {
    return {
      content: '',
      config: {
        toolbar: [
          ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
        ],
        height: 300
      }
    };
  },
  methods: {
    onBlur(evt) {
      console.log(evt);
    },
    onFocus(evt) {
      console.log(evt);
    },
    onContentDom(evt) {
      console.log(evt);
    },
    onDialogDefinition(evt) {
      console.log(evt);
    },
    onFileUploadRequest(evt) {
      console.log(evt);
    },
    onFileUploadResponse(evt) {
      console.log(evt);
    }
  }
};
</script>

Props

Name	Type	Description
`name`	`String`	Name of instance ckedior. Default: editor-
`id`	`String`	Id of instance ckedior. Default: editor-1
`types`	`String`	Types of ckedior. Default: classic
`config`	`Object`	All configuration of ckeditor. Default: {}
`instanceReadyCallback`	`Function`	Optional function that will be attached to CKEditor instanceReady event.
`readOnlyMode`	`Boolean`	Option setReadOnly editor initializes in the proper mode. Default: false

Events

Name	Description
`blur`	Fired when the editor instance loses the input focus.
`focus`	Fired when the editor instance receives the input focus.
`contentDom`	Event fired when the editor content (its DOM structure) is ready
`dialogDefinition`	Event fired when a dialog definition is about to be used to create a dialog into an editor instance
`fileUploadRequest`	Event fired when the file loader should send XHR
`fileUploadResponse`	Event fired when the file loader response is received and needs to be parsed