<template>
    <div id="editor-box">
        <ckeditor :editor="editor" v-model="value" :config="editorConfig"  @ready="logEvent('ready', $event)"></ckeditor>
    </div>
</template>

<script >
    // import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    import ClassicEditor from 'axl-editor';
    import { MyCustomUploadAdapterPlugin } from '@/components/richText/customUploadAdapter'
    // import {ref,onMounted } from 'vue'
    export default {
        name: 'editor-box',
        props: ['modelValue','content'],
        emits: ['update:modelValue'],
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    // The configuration of the editor.
                  // uploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile?command=QuickUpload&type=Files&responseType=json',
                  // simpleUpload:{
                  //     uploadUrl: 'https://apiwx.twzxjy.com/api/v1/public/uploadFile?command=QuickUpload&type=Files&responseType=json',
                  // }
                  extraPlugins:[MyCustomUploadAdapterPlugin]
                }
            };
        },
       computed: {
          value: {
            get() {
              return this.modelValue
            },
            set(value) {
              this.$emit('update:modelValue', value)
            }
          }
        },
        methods:{
          logEvent(eventName, event){
            const _this = this
            console.log(eventName)
            // event.on( 'fileUploadRequest', async evt => {
            //   console.log(evt)
            // })
          },
        }
    }
    // const name = ref(ClassicEditor)
    // const editorData = ref('<p>Content of the editor.</p>')
    // const editorConfig = ref({})
</script>
