Getting Started

HTML

Include path of ckeditor in index.html page

<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>

or

<script src="/path/to/ckeditor.js"></script>

.vue Component

Single CKEditor

<template>
  <div class="app">
    <ckeditor v-model="content" :config="config"></ckeditor>
  </div>
</template>

<script>
import Ckeditor from 'vue-ckeditor2'

export default {
  data () {
    return {
      content: '',
      config: {
        toolbar: [
          [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ]
        ],
        height: 300
      }
    }
  },
  components: { Ckeditor }
}
</script>

Multi CKEDITOR

<template>
  <div class="app">
    <ckeditor v-model="contentA" types="inline" :config="configA"></ckeditor>
    <ckeditor v-model="contentB" :config="configB"></ckeditor>
  </div>
</template>

<script>
import Ckeditor from 'vue-ckeditor2'

export default {
  data () {
    return {
      contentA: '',
      configA: {
        toolbar: [[ 'Bold' ]],
        height: 300
      },
      contentB: '',
      configB: {
        toolbar: [[ 'Italic' ]],
        height: 150
      }
    }
  },
  components: { Ckeditor }
}
</script>