<template>
  <div class="ckeditor">
    <ckeditor
      :editor="editor"
      :value="value"
      :disabled="disabled"
      :config="editorConfig"
      @ready="onEditorReady"
      @input="onEditorInput"
    ></ckeditor>
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue2'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import MyUploadAdapter from './MyUploadAdapter'

export default {
  components: {
    ckeditor: CKEditor.component
  },
  props: {
    value: { type: String },
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        language: this.$i18n.locale.toLocaleLowerCase()
      }
    }
  },
  methods: {
    onEditorReady(editor) {
      const FileRepository = editor.plugins.get('FileRepository')
      // 自定义上传图片插件
      FileRepository.createUploadAdapter = loader => {
        return new MyUploadAdapter(loader)
      }
    },
    onEditorInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style>
.ck-content {
  min-height: 300px;
  max-height: 500px;
  word-break: break-word;
}
.ck-sticky-panel__content {
  position: unset !important;
}
</style>
