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

1. 安装 wangEditor，这里是npm安装
   

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

2. 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>