<!--
* @FileDescription: 富文本框
* @Author: ztc
* @Date: 2023年03月22日
* @Params(调用时  v-model 绑定 父组件值)
* @Params(needImage) 是否需要 上传图片  默认关闭
* @Params(imageUrl) 图片上传地址
* @Params(data   key-val   键值对) 图片上传附加参数
-->

<template>
    <div class="w_editor">
        <!-- 富文本编辑器 -->
        <div ref="w_view"></div>
    </div>
</template>

<script>
    //自定义字体类型
    /*富文本编辑图片上传配置*/
    const uploadConfig = {
        action: ''  // 必填参数 图片上传地址
    };
    // 引入富文本
    import WE from "wangeditor";
    // 引入elementUI Message模块（用于提示信息）
    import { Message } from "element-ui";

    export default {
        name: "wangEditor",
        model: {
          prop: 'desc',
          event:'change'
        },
        props:{
          desc:{
            type:String,
            default:""
          },
          //业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
          isClear:{
            type:Boolean,
            default:false
          },
          needImage:'',
          imageUrl:'',
          data:{},
          showFullScreen: {
            type:Boolean,
            default:true
          }
        },
        data() {
            return {
                info_:null,
                isChange:false,
                // 编辑器实例
                editor: null,
                // 富文本菜单选项配置
                menuItem: [
                    "head",
                    "bold",
                    "fontSize",
                    "fontName",
                    "italic",
                    "underline",
                    "indent",
                    "lineHeight",
                    "foreColor",
                    "backColor",
                    "link",
                    "list",
                    "justify"
                ]
            };
        },
        watch: {
            // 监听默认值
          isClear(val){
              // console.log(val)
            if (val){
              this.editor.txt.clear()
            }
          },
          //接收父组件传递过来的值
          desc(value){
            //判断父组件传递过来的值跟当前编辑器内容是否一样
            if (value != this.editor.txt.html()) {
              this.editor.txt.html(this.desc)
            }
          }
        },
        mounted() {
            this.initEditor();
            if(this.editor){
              this.editor.txt.html(this.desc)
            }
        },
        methods: {
            clearText(){
              if (this.editor) {
                this.editor.txt.clear()
              }
            },
            // 初始化编辑器
            initEditor() {
              if(this.needImage){
                this.menuItem.push("image")
              }
                // 获取编辑器dom节点
                const editor = new WE(this.$refs.w_view);
                // 配置编辑器
                editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
                editor.config.onchangeTimeout = 5000; /* 配置触发 onchange 的时间频率，默认为 200ms */
                editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
                editor.config.showFullScreen = this.showFullScreen; /* 配置全屏功能按钮是否展示 */
                editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
                // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
                editor.config.customAlert = err => {
                    Message.error(err);
                };
                // 监控变化，同步更新数据
                editor.config.onchange = newHtml => {
                    // this.isChange = true;
                    // // 异步更新组件富文本值的变化
                    // // this.defaultText=newHtml
                    // this.$emit("update:rich-text", newHtml);
                  this.info_ = newHtml // 绑定当前逐渐地值
                  this.$emit('change', this.info_) // 将内容同步到父组件中
                };

                // 自定义上传图片
                editor.config.customUploadImg = (resultFiles, insertImgFn) => {
                    let param = new FormData(); // 创建form对象
                    param.append("filename", "test");
                    param.append("file", resultFiles[0]);
                    for(let i in this.data){
                      param.append(this.data[i].key,this.data[i].val)
                    }
                    // 一般项目中都会封装好发送请求得方法,我这为了通用直接用axios
                    axios.post(this.imageUrl, param).then(res => {
                        // res是上传成功后返回的数据,返回的数据中需要有上传图片的路径,
                        // 通过insert方法将路径传入,即可将图片在富文本中插入
                        if (res.status === 200) {
                            // 我这返回的是JSON数据,需要解析
                            let path = res.data.data.fileUrl

                            // 上传代码返回结果之后，将图片插入到编辑器中
                            insertImgFn(path);
                        }
                    });

                };

                // 创建编辑器
                editor.create();
                this.editor = editor;
            }
        },
        beforeUnmount() {
            // 销毁编辑器
            this.editor.destroy();
            this.editor = null;
        },
    };
</script>

<style>
.w-e-toolbar{
  z-index: 1 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
  height: auto;
}
</style>
