<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>