vue3 使用 wangEditor v5

import { computed, onBeforeUnmount, ref } from "vue";
import {
  Editor,
  Toolbar,
  getEditor,
  removeEditor,
} from "@wangeditor/editor-for-vue";
import cloneDeep from "lodash.clonedeep";
import { uploads } from "@/utils/baseCodes";
import { qiniudnUploader } from "@/utils/qiniudnUploader";
import { token, deleteYunImg } from "@/api/upload";
import { useStore } from "vuex";

export default {
  components: { Editor, Toolbar },
  setup(props, ctx) {
    // console.log(props);
    // console.log(ctx);
    const store = useStore();
    const imgdata = [];
    const editorId = `w-e-${Math.random().toString().slice(-5)}`; //【注意】编辑器 id ，要全局唯一
    const defaultContent = [{ type: "paragraph", children: [{ text: "" }] }];
    const getDefaultContent = computed(() => cloneDeep(defaultContent)); // 注意，要深拷贝 defaultContent ，否则报错
    const toolbarConfig = {};
    const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };
　//这里是图片上传，我博客是用使用了七牛云存储，所以这边调用七牛存储
    editorConfig.MENU_CONF["uploadImage"] = {
      // 上传图片的配置
      // 自定义上传
      async customUpload(file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        uploads(file, (files) => {
          token().then((res) => {
            qiniudnUploader(res.data, files, "IMG", (res) => {
              insertFn(
                "http://" + store.state.qiniu.qiniuaddr + "/" + res.key,
                null,
                null
              );
              imgdata.push(res.key);
            });
          });
        });
      },
    };
//这里是上传的时候对比数据删除多余的图片
    const ongetImg = () => {
      const editor = getEditor(editorId);
      const imgList = editor.getElemsByType("image");
      imgdata.map((item) => {
        imgList.map((img, index) => {
          if (index === 0) {
            ctx.emit("onUrl", img.src);
          }
          if (img.src.indexOf(item) !== -1) {
            // console.log(img.src);
          } else {
            deleteYunImg({
              bucket: store.state.qiniu.name,
              key: item,
            }).then((res) => {
              console.log(res);
            });
          }
        });
      });
    };
    const editorClear = () => {
      const editor = getEditor(editorId);
      editor.clear();
    };
　//我在这里把数据存到父组件存储
    const handleChange = (editor) => {
      console.log("change:", editor.children);
      const contentStr = JSON.stringify(editor.children);
      const html = editor.getHtml();
      ctx.emit("onBack", contentStr, html);
      //  console.log(html)
    };
    const dangerouslyInsertHtml = (content) => {
      const editor = getEditor(editorId);
      if (editor == null) return;
      console.log(content);
      editor.dangerouslyInsertHtml(content);
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = getEditor(editorId);
      if (editor == null) return;
      editor.destroy();
      removeEditor(editorId);
    });

    return {
      editorId,
      mode: "default",
      getDefaultContent,
      toolbarConfig,
      editorConfig,
      handleChange,
      ongetImg,
      editorClear,
      dangerouslyInsertHtml,
    };
  },
};
</script>