vue3+wangEditor实现新闻管理的新增和编辑，弹窗编辑实现数据回显

安装wangEditor插件

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

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

使用

<div style="width: 85%; margin: 15px auto">
    <span class="title">新闻标题：</span
    ><el-input
      style="width: 50%"
      v-model="title"
      placeholder="请输入"
    ></el-input>
    <Toolbar
      style="border-bottom: 0px solid #ccc; margin: 15px auto 0"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 450px; overflow-y: hidden;margin-bottom:20px"
      v-model="body"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
    <el-button @click="submit">提交</el-button>
  </div>

在需要的页面引入，不要忘记引入样式；script中引入组件，我这里是封装了一个新增的组件，接下来在编辑弹窗中还有用到；（不要问为什么新增和编辑不放到一个页面一个弹窗中实现，问就是经理不让）

import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, reactive, ref, shallowRef, toRefs } from "vue"; //onMounted
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { add_localNews_edit } from "@/request/api";
import { ElMessage } from "element-plus";

export default {
  components: { Editor, Toolbar },
  //这里是编辑时候父组件传递的值：newEdit是编辑的数据；isEdit:用来判断是不是编辑
  props: {
    newEdit: {
      type: Object,
    },
    isEdit: {
      type: Boolean,
    },
  },
  setup(props, context) {
  //定义数据接收父组件传递的数据。注意这里最好是定义变量来接收再使用，不然容易报错。
    const data = reactive({
      isEdit: props.isEdit ? props.isEdit : false,
      newEdit: props.newEdit ? props.newEdit : {},
    });
    //表单绑定数据
    const title = ref("");
    const body = ref("");//这是编辑器绑定的数据
    //判断如果是编辑，就把父组件传递的值赋给表单数据和编辑器，实现数据回显
    if (data.isEdit) {
      body.value = data.newEdit.body;
      title.value = data.newEdit.title;
    } else {
      body.value = "";
      title.value = "";
    }
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    // 内容 HTML
    // 模拟 ajax 异步获取内容
    const toolbarConfig = {};
    const editorConfig = { MENU_CONF: {}, placeholder: "请输入内容..." };
    editorConfig.MENU_CONF["uploadImage"] = {
      fieldName: "image",
      headers: {
        Authorization: `Bearer ${sessionStorage.getItem("token")}`,
      },
      maxFileSize: 3 * 1024 * 1024,
      server: "/xwzn/tdzhsq/api/news_image_upload",//这里需要后端提供一个提交图片的接口，接口需要把图片在服务器的url返回，然后插入编辑器。
      customInsert(res, insertFn) {
        const url = res.data.url;
        const alt = res.data.alt;
        const href = res.data.href;
        insertFn(url, alt, href);
      },
    };
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    const submit = () => {
      const dataa = {
        body: body.value,
        title: title.value,
      };
      //如果编辑，就向父组件传递修改后的数据,submitDiaLog父组件定义该名称的方法来接收数据
      if (data.isEdit) {
        context.emit("submitDiaLog",dataa);
      } else {
        add_localNews_edit("post", dataa).then((res) => {
          if (res) {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "新增成功",
              });
              title.value = "";
              body.value = "";
            } else {
              ElMessage.error(res.msg);
            }
          } else {
            ElMessage.error("新增失败");
          }
        });
      }
    };
    return {
      editorRef,
      body,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      submit,
      title,
      ...toRefs(data),
    };
  },
};
</script> 

父组件

引入组件，并注册

import MyEditor from "../news/wangEditor.vue";
export default {
  components: {
    MyEditor,
  },

弹窗中使用组件

<el-dialog
        :before-close="closeDialog"
        v-model="addRoleDiaLogFlag"
        :title="DiaLogFlagTitle"
        v-if="addRoleDiaLogFlag"
      >
      //newEdit、isEdit父组件向子组件传值 submitDiaLog接收子组件传值
        <my-editor
          :newEdit="newEdit"
          :isEdit="true"
          @submitDiaLog="submitDiaLog"
        />
      </el-dialog>

定义接收方法

const submitDiaLog = (newData) => {
      // 编辑 newData就是编辑器组件传来的修改的值，请求修改接口即可。
      console.log(newData);
      add_localNews_edit("patch", newData, `/${data.new_id}`).then((res) => {
        if (res) {
          if (res.code == 200) {
            fetchData();
            closeDialog();
            ElMessage({
              type: "success",
              message: "修改成功",
            });
          } else {
            ElMessage.error(res.msg);
          }
        } else {
          ElMessage.error("修改失败");
        }
      });
    };

具体使用即配置参考wangEditor官网(https://www.wangeditor.com/)