富文本编辑器iceEditor中上传word并回显

项目中有需求,用户通过全选word中的图片和文字,然后直接粘贴到富文本编辑器中,可以正常显示,但是实际开发中发现word多图片粘上去的时候图片全部都是file本地路径,无法正常显示,于是考虑另一种思路,用户直接上传word,然后通过后台解析word,并且把word中的图片进行上传,最后返回给前端的就是纯标签形式,类似于下图

前端收到数据回传后,直接渲染到富文本内就可以了

以iceEditor为例

//iceEditor此处为自定义组件
iceEditor.plugin({
            menu: '
',
            name: "word",
            style: ".demo-p{margin-bottom:10px}.demo-button{padding:0 10px}",
            popup: {
              width: 295,
              height: 205,
              content: `

                

                  

                  
点击上传
                  

                    

                      

                      

                      

                      

                      

                    
                  
                
              
`,
            },
            success: function (e, z) {
              // @ts-ignore
              // 单文件上传
              ui.singleFileDragUpload({
                header: {
                  "Token-Server5G": GlobalData.instance.token,
                },
                beforeUpload: function (iceUploadDom: any) {
                  // 准备上传
                  uploadDom = iceUploadDom.find(".upload-loading")[0];
                  uploadDom.classList.add("show");
                },
                success: (res: any) => {
                  // @ts-ignore
                  ice.pop({
                    icon: "success",
                    content: res.message,
                  });
                  // 上传成功
                  var p = z.c("p");
                  var desc = ''
                  //此处是因为我们的图片都是要去http前缀所以才这样写,根据自己项目需求去处理
                  desc = res.data.replaceAll(`/XLAB_SERVER`,`${GlobalData.instance.m_config.serviceUrl}`)
                  p.innerHTML = desc;
                  z.setHTML(p, true);
                  z.pd();
                  // 关闭本弹窗
                  e.close();
                },
                error: (res: any) => {
                  // @ts-ignore
                  ice.pop({
                    icon: "fail",
                    content: res.message,
                  });
                },
                complete: () => {
                  // 上传结束
                  uploadDom.classList.remove("show");
                },
              });
            },
          });