<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: '#ffffff'
      },
      uploadUrl: {
        require: true,
        default: ''
      },
      tokenUrl: {
        default: ''
      },
      value: {
        require: true,
        default: ''
      }
    },
    data() {
      return {
        editorValue : this.value
      };
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
    },
    computed: {},
    watch: {
      value:function (value) {
         this.editor.setData()
      },
    },
    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;
        this.editor.on( 'change', ( 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>