<template>
    <div>
        <textarea id="editor" rows="10" cols="80" v-model="editorValue"></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: '#f8f8f8'
      },
      uploadUrl: {
        require: true,
        default: ''
      },
      tokenUrl: {
        default: ''
      },
      value: {
        require: true,
        default: ''
      }
    },
    data() {
      return {
        editorValue : this.value
      };
    },
    mounted() {
      this.init()
      console.log(3, this.value)
    },
    beforeDestroy() {
    },
    computed: {},
    methods: {
      init () {
        CKEDITOR.replace('editor', {
          height: this.height, 
          width: this.width, 
          uiColor: this.color,
          filebrowserImageUploadUrl: this.uploadUrl,
          // extraPlugins: 'easyimage',
          cloudServices_tokenUrl: 'https://example.com/cs-token-endpoint',
          cloudServices_uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/',
          });
        this.editor = CKEDITOR.instances.editor;
        this.editor.on( 'blur', ( evt ) =>{
            // getData() returns CKEditor's HTML content.
          this.$emit('getValue', evt.editor.getData())
        });
      }
    },
    watch:{
      value: function(value) {
        this.editor.setData(value)
      }
    },
    components: {}
  };
</script>

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

</style>