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

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

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

以iceEditor为例

//iceEditor此处为自定义组件
iceEditor.plugin({menu: '<div class="icon ice-page-list" title="上传word"></div>',name: "word",style: ".demo-p{margin-bottom:10px}.demo-button{padding:0 10px}",popup: {width: 295,height: 205,content: `<div class="iceEditor-group"><div class="iceUpload-single-drag" data-accept="docx/*" data-name="file" data-url="${GlobalData.instance.m_config.serviceUrl}/Scene/Word2Html?uploadPrefix=/XLAB_SERVER&bReverseColor=true"><div class="icon ice-files"></div><div class="iceUpload-single-title">点击上传</div><div class="upload-loading"><div class="loader"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div></div></div>`,},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-ignoreice.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-ignoreice.pop({icon: "fail",content: res.message,});},complete: () => {// 上传结束uploadDom.classList.remove("show");},});},});

富文本编辑器iceEditor中上传word并回显相关推荐

html编辑保存为word文档,html 保存成word (富文本编辑器导出内容成word)
这几天项目里有个需求,用到富文本编辑器,然后导出word. 富文本编辑器,网上很多,使用夜很简单,我们使用的是kindEditor.百度的ueditor很好,而且文档很全.阿里的kissy 感觉比较复 ...
富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决问题原因我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
SSM+KindEditor实现富文本编辑器图片上传
场景 KindEitor官方文档: http://kindeditor.net/demo.php 实现效果下载Kindeditor 下载地址: http://kindeditor.net/down ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...

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

富文本编辑器iceEditor中上传word并回显相关推荐

最新文章

热门文章