wangEditor富文本使用及踩坑经历（增加图片上传、附件上传）

安装 wangEditor，这里是npm安装

"@wangeditor/editor": "^5.1.1",
"@wangeditor/plugin-upload-attachment": "^1.0.0",

vue组件使用（vue3+ts）

<template>
    <div>
           <!-- 顶部工具 -->
            <div id="toolbar-container">
             </div>
          <!-- 下面内容 -->
          <div id="editor-container" style="min-height: 164px"> 
           </div>
    <div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css";
import {
  Boot,//下面加入附件上传、进行回车事件需要使用到
  createEditor,//创建编译器
  createToolbar,//创建顶部工具
  IEditorConfig,
  IDomEditor,
  IToolbarConfig,
} from "@wangeditor/editor";
import attachmentModule from "@wangeditor/plugin-upload-attachment";//wangeditor的附件插件
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  if (data.editor) {
    data.editor.destroy();
  }
  if (data.toolbar) {
    data.toolbar.destroy();
  }
});
onMounted(() => {
  // 定义 slate 插件
  function withBreak<T extends IDomEditor>(editor: T): T {//进行回车事件判定（也可以说是换行时间判定）
    const { insertBreak } = editor;
    const newEditor = editor;
    // 重写 editor insertBreak API
    // 例如做一个 ctrl + enter 换行功能
    newEditor.insertBreak = () => {
      if(window.event.inputType=="insertParagraph"){//如果是单纯回车事件就进行下面不走
        console.log(""213123)
      }else{//否则就换行
        insertBreak()
      }
    };
    // 返回 editor ，重要！
    return newEditor;
  }
  // 注册到 wangEditor
  if (Boot.plugins.length < 13) {//判断如果已经插入进去，不在二次插入
    Boot.registerPlugin(withBreak);
  }
  type InsertFnType = (url: string, alt: string, href: string) => void;
  if (Boot.plugins.length < 14) {//判断如果已经插入进去，不在二次插入
    Boot.registerModule(attachmentModule);
  }
  const editorConfig: Partial<IEditorConfig> = {
    // 在编辑器中，点击选中“附件”节点时，要弹出的菜单
    hoverbarKeys: {
      attachment: {
        menuKeys: ["downloadAttachment"], // “下载附件”菜单
      },
    },
    MENU_CONF: {
      // “上传附件”菜单的配置
      uploadAttachment: {
        server: "/api/upload", // 服务端地址
        timeout: 5 * 1000, // 5s

        fieldName: "custom-fileName",
        meta: { token: "xxx", a: 100 }, // 请求时附加的数据
        metaWithUrl: true, // meta 拼接到 url 上
        headers: { Accept: "text/x-json" },

        maxFileSize: 10 * 1024 * 1024, // 10M

        onBeforeUpload(file: File) {
          return file; // 上传 file 文件
        },
        onProgress(progress: number) {},
        onSuccess(file: File, res: any) {},
        onFailed(file: File, res: any) {
        },
        onError(file: File, err: Error, res: any) {
          console.error("onError", file, err, res);
        },
        //附件自定义长传
        customUpload(file: File, insertFn: Function) {//附件上传处理，可以进行请求发送，如果加了这个方法，上面的server请求将不会再进行，切记切记!!!!!!!!!
    


        },
      },
    },
  };
  (editorConfig as any).MENU_CONF["uploadImage"] = {
    //图片自定义长传
    async customUpload(file: File, insertFn: InsertFnType) {//file上传的图片，这里可以进行文件上传操作
         


    },
  };
  editorConfig.placeholder = "请输入内容";
  editorConfig.onChange = (editor: IDomEditor) => {
    // 当编辑器选区、内容变化时，即触发
    data.chatData = editor.getHtml();
  };
  editorConfig.autoFocus = false;
  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {
    excludeKeys: [
      // 排除菜单组，写菜单组 key 的值即可
      "blockquote",
      "|",
      "insertImage",
      "group-video",
    ],
    // 插入哪些菜单
    insertKeys: {
      index: 15, // 自定义插入的位置
      keys: ["uploadAttachment"], // “上传附件”菜单
    },
  };
  // 创建编辑器
  data.editor = createEditor({
    selector: "#editor-container",
    config: editorConfig,
    mode: "default", // 或 'simple' 参考下文
  });
  // 创建工具栏
  data.toolbar = createToolbar({
    editor: data.editor,
    selector: "#toolbar-container",
    config: toolbarConfig,
    mode: "default", // 或 'simple' 参考下文
  });
  data.editor.disable();
});
</script>