pwilkniss / vue-ckeditor2

Ckeditor using for Vue.js 2

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)" />
  </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(editor) {
      console.log(editor);
    },
    onFocus(editor) {
      console.log(editor);
    }
  }
};
</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

Build Setup

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

Created By

• Dang Van Thanh

Thanks to:

• Eduárd Moldován
• Dominique FERET
• comfuture
• 旺旺
• Tony Yip
• Nedyalko Dyakov
• Bryan Miller
• Jeff Omiecinski
• rlfscin
• Renato Souza
• Fernando Morgenstern
• Christoph-Wagner

License

MIT © Dang Van Thanh