<template>
    <div id="websiteEditorElem" style="height: 400px"></div>
</template>

<script>
    import E from 'wangeditor'
    export default {
        name: "index",
        props:[
          'content'
        ],
        watch: {
            text(newVal, oldVal) {
                console.log(newVal, oldVal)
                //this.phoneEditor.txt.html(this.text)
                if (!newVal && oldVal) {
                    this.text = newVal
                    this.intiPhoneEditor()
                }
                this.sendContent()
            }
        },
        data() {
          return {
              text: this.content,
              phoneEditor: ''
          }
        },
        mounted() {
            this.$nextTick(() => {
                this.intiPhoneEditor()
            })
        },
        methods: {
            sendContent() {
                this.$emit('get-content', this.text)
            },
            intiPhoneEditor() {
                console.log('初始化值：', this.text)
                const _that = this
                _that.phoneEditor = new E('#websiteEditorElem')
                const phoneEditor = _that.phoneEditor
                phoneEditor.customConfig.zIndex = 1
                phoneEditor.customConfig.onchange = function (html) {
                    _that.text = html
                }
                // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
                // phoneEditor.customConfig.uploadFileName = 'uploadFiles'

                // phoneEditor.customConfig.customUploadImg = function (files, insert) {
                //     _that.uploadImg(files[0]).then(data => {
                //         insert(data)
                //     })
                // }
                phoneEditor.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'justify',  // 对齐方式
                    'image',  // 插入图片
                ]
                phoneEditor.create()
                phoneEditor.txt.html(this.text)
            },
        }
    }
</script>

<style scoped>

</style>