<template>
  <div>
    <textarea id="editor" rows="10" cols="80"></textarea>
  </div>
</template>
<script type="text/ecmascript-6">
import CKEDITOR from 'CKEDITOR'
export default {
  name: 'ckeditor',
  props: {
    height: {
      default: '400px'
    },
    width: {
      default: '100%'
    },
    color: {
      default: '#ffffff'
    },
    uploadUrl: {
      require: true,
      default: ''
    },
    tokenUrl: {
      default: ''
    },
    value: {
      require: true,
      default: ''
    }
  },
  data () {
    return {
      isInit: false
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.isInit && this.editor.setData(value.value)
      }
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
  },
  methods: {
    init () {
      CKEDITOR.replace('editor', {
        height: this.height,
        width: this.width,
        uiColor: this.color,
        lang: 'zh-cn',
        filebrowserImageUploadUrl: this.uploadUrl,
        filebrowserUploadMethod: 'form'
      })
      this.editor = CKEDITOR.instances.editor
      setTimeout(() => {
        this.isInit = true
      }, 1000)
    },
    getValue () {
      return this.editor.getData()
    }
  },
  components: {}
}
</script>

<style lang="less" rel="stylesheet/less" scoped></style>
