Skip to content

dangvanthanh/vue-ckeditor2

Repository files navigation

vue-ckeditor

Ckeditor using for Vue.js 2

Requirements

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

Build Setup

You can use vue-cli with vue-rollup-boilerplate templates or other vue templates

Created By

Thanks to contributers

License

MIT © Dang Van Thanh