
<template>
    <div class="layout-editor-wrap">
        <!-- :value="content" -->
        <!-- <quill-editor
            class="editor"
            ref="myQuillEditor"
            v-model="content"
            :options="editorOption"
            @change="onEditorChange"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
        /> -->

        <quill-editor
            class="editor"
            ref="myQuillEditor"
            :options="editorOption"
            @change="onEditorChange"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
        />
        
        <EditorUpload
            ref="editorUpload"
            :accept="accept"
            @handleUploadSuccess="handleUploadSuccess"
        />
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { Quill } from 'vue-quill-editor'
import { ImageDrop } from 'quill-image-drop-module' // 图片拖拽
import ImageResize from 'quill-image-resize-module' // 图片缩放
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

import { addQuillTitle } from './module/quill-title'
import { fontFamily, fontSize, toolbar} from './module/editor.config'

// 字体
let Font = Quill.import('attributors/style/font')
Font.whitelist = fontFamily
Quill.register(Font, true)

// 字号
let fontSizeStyle = Quill.import('attributors/style/size')
fontSizeStyle.whitelist = fontSize
Quill.register(fontSizeStyle,true)	 //重写字号选择列表

console.log(Font)
export default {
    components: {
        quillEditor,
        EditorUpload: () => import('./module/EditorUpload.vue'),
    },
    props: {
        editorHtml: {
            type: String,
            default: () => {
                return "";
            },
        }
    },
    data() {
        return {
            editorOption: {
                placeholder: '在此处输入内容…',
                modules: {
                    imageDrop: true,
                    imageResize: {
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white',
                        },
                        modules: ['Resize', 'DisplaySize', 'Toolbar'],
                    },
                    toolbar: toolbar,
                },
            },
            content: '',
            accept: '.jpg,.jpeg,.png,.bmp,.gif',
        }
    },
    computed: {
        //当前富文本实例
        editor() {
            return this.$refs.myQuillEditor.quill
        },
    },
    // watch: {
    // //监听父组件传值  令content 为父组件传来的值
    //     editorHtml: {
    //         handler(newVal) {
    //             console.log(newVal,"newVal")
    //             this.content = newVal;
    //         },
    //         deep: true,
    //         immediate: true,
    //     }
    // },
    mounted() {
        console.log(this.editorHtml,"this.editorHtml")
        this.content = this.editorHtml;
        addQuillTitle()
        let imgHandler = async (image) => {
            console.log(image)
            if (image) {
                let fileInput = document.querySelector(
                    '.editor-upload-wrap .el-upload__input'
                )
                fileInput.click() // 触发上传
            }
        }
        this.editor.getModule('toolbar').addHandler('image', imgHandler)
    },
    methods: {
        // onEditorChange(value) {
        //     this.$emit('onEditorChange', {
        //         content: this.content
        //     })
        // },
        onEditorChange(value) {
            this.$emit('onEditorChange', {
                content: value.html
            })
        },
        onEditorBlur(editor) {
            // console.log('editor blur!', editor)
            this.$emit('onEditorBlur', {
                editor: editor,
                content: this.content
            })
        },
        onEditorFocus(editor) {
            // console.log('editor focus!', editor)
        },
        onEditorReady(editor) {
            // console.log('editor ready!', editor)
        },
        handleUploadSuccess(file) {
            if (file.length > 0) {
                let Range = this.editor.getSelection();
                //上传文件成功之后在富文本中回显(显示)
                this.editor.insertEmbed(
                    Range != null ? Range.index : 0,
                    "image",
                    file
                );
            }

            // todo
            // if (file.src != null && file.src.length > 0) {
            //     let Range = this.editor.getSelection();
            //     let url = file.src.indexOf("http") != -1 ? file.src : "http:" + file.src;
            //     //上传文件成功之后在富文本中回显(显示)
            //     this.editor.insertEmbed(
            //         Range != null ? Range.index : 0,
            //         "image",
            //         url
            //     );
            // }
        },
    },
}
</script>

<style lang="scss">
@import "./module/quill.scss";
.layout-editor-wrap{
    .ql-align-right{
        text-align: right;
    }
}
</style>