富文本上传图片及回显功能

1、首先安装依赖 @wangEditor vue3安装依赖

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2、根据实际情况（看接口是否要转成base64格式） 

<div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 300px; overflow-y: hidden"
              v-model="ruleForm.introduce"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
          </div>

3、js部分引入

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

4、富文本配置

//富文本配置
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const toolbarConfig = {};、
// 上传图片
const editorConfig = {
  MENU_CONF: {
    uploadImage: {
      server: "/pcapi/index/upload",
      fieldName: "file",
      methods: "post",
      metaWithUrl: true,
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res);
      },
      customInsert(res, insertFn) {
        console.log(res);
        insertFn("https://c2c.kuxia.top" + res.url);
      }
    }
  }
};

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

const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 如果接口需要转成base64
 introduce（参数名）: Base64.encode(ruleForm.introduce)