<template>
    <div id="wangeditor">
        <div ref="editorElem" style="text-align:left;"></div>
      </div>
</template>
<script>
let token = localStorage.getItem("token");
    import E from "wangeditor";
    export default {
        name: 'wangEditor',
        data () {
            return {
                editor: null,
                editorContent: ''
            }
        },
        props: {
            htmlData:{
                type:String,
                default: '',
                required: true
            },
            isDisabled: {
                type:Boolean,
                required: true
            }
        },
        watch:{
            htmlData(val, newval){
                let that = this;
                // this.editor.txt.html(this.htmlData);
            },
            isDisabled(val, newval){
                let that = this;
                that.editor.$textElem.attr('contenteditable', newval);	//设置不可编辑
            }
        },
        mounted () {
            let that = this;
            this.editor = new E(this.$refs.editorElem);
            // 编辑器的事件，每次改变会获取其html内容
            this.editor.config.onchange = html => {
                console.log('change>>>>>>>>>>>')
                this.editorContent = html;
                that.$emit('upDateContentData',html);
                // 把这个html通过catchData的方法传入父组件
            };
            this.editor.config.uploadImgShowBase64 = true // base 64 存储图片
            this.editor.config.menus = [
            // // 菜单配置
            // 'head', // 标题
            // 'bold', // 粗体
            // 'fontSize', // 字号
            // 'fontName', // 字体
            // 'italic', // 斜体
            // 'underline', // 下划线
            // 'strikeThrough', // 删除线
            // 'foreColor', // 文字颜色
            // 'backColor', // 背景颜色
            // 'link', // 插入链接
            // 'list', // 列表
            // 'justify', // 对齐方式
            // 'quote', // 引用
            // 'emoticon', // 表情
            // 'image', // 插入图片
            // 'table', // 表格
            // 'code', // 插入代码
            // 'undo', // 撤销
            // 'redo' // 重复
             'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'image',
            'video',
            'table',
            'code',
            'splitLine',
            'undo',
            'redo',
            ];
             /* 自定义图片上传（支持跨域和非跨域上传，简单操作）*/ 
                this.editor.config.customUploadImg = async (files, insert) => { 
                    console.log('上传图片了>>>>>>>>')
                    /* files 是 input 中选中的文件列表 */ 
                    let fd = new FormData();
                    fd.append('files', files[0], files[0].name); 
                    // formData.append('file', files[0]) 
                    // let data = await this.upload(formData) 
                    this.$axios({
                        method: "POST",
                        url: "/oss/oss/uploadBat",
                        data: fd,
                        headers: {
                            'token': token
                        },
                    }).then(res => {
                        let list = [];
                        let datas = res.data || {};
                        let dataList = datas.data || [];
                        insert(dataList[0].url);
                    }).catch((err) => {
                        this.$message.error('请求失败，请稍后重试');
                    })
                    // /* upload方法是后台提供的上传图片的接口 */
                    // /* insert 是编辑器自带的 获取图片 url 后，插入到编辑器的方法 上传代码返回结果之后，将图片插入到编辑器中*/ 
                    // insert(data.imgUrl)
                } 
            this.editor.create(); // 创建富文本实例
            this.editor.txt.html(this.htmlData);
        }
    }
</script>