开源技术

您当前的位置: 首页 > 开源技术 > 技术分享

ueditor 富文本编辑器上传word图片

发布时间:2021-08-24 16:59:08 浏览:2 次

因为网页不能直接访问本地文件。因此,上传word图片只能通过activeX插件,或者是本地客户端上传。


解决思路:1、研发一个本地客户端,功能用于解析word文档,上传word中的图片,上传word的内容。

                 2、本地客户端能被浏览器调用,并且能传参数(参数用于,能够识别是哪个浏览器用户上传word,能够正确的回显到浏览器窗口)

                为了达到这个目的,使用的系统注册表功能。现在新的系统,可以通过app://等跳转链接直接打开应用程序,于是利用它,作为浏览器和程序交互的入口。

                3、修改富文本编辑器,用户调用exe程序,传输id,该id用于回显到浏览器使用。前端有个定时器,一直轮询该id是否已上传成功。上传成功,提取id的内容,填充到富文本框。


用ueditor作为演示。


本作者已完成一个插件,可以直接使用

app.zip

上述文件解压后得到的exe文件。直接安装。目前只支持window,别的平台可类似参考。

该exe接收的参数:

YKHtmlApp://open?id=id关键词&uploadFile=上传文件的路径&upload=上传word内容的路径

在ueditor中添加一个自定义的按钮,用于提交

image.png

在点击后,生成独立的id,保存到缓存中,并且开始轮询该id,是否已上传word。然后通过window.location.href = '放入上述的链接,打开应用';

image.png

image.png

选择需要的word,点击上传

成功后,既可回显

image.png


后端需要四个接口:

1、上传图片接口(用于上传图片,可以根据id识别是哪个浏览器上传的)

2、上传word内容接口(用于上传word内容,可以根据id来保存内容到相应的缓存)

3、轮询id的接口(前端轮询id,如果成功,并且返回word)

4、创建id的接口(这个是最重要,因为这个id每点击一次创建一次,这个是判断上传成功后,回显到哪个人的浏览器)


可以按需求设计,接口只有java版本,并且就四个简单的接口,没有什么复杂的调用,其他可根据需要设计。主要复杂在于前端和exe软件的设计。。。


ueditor.zip

这是ueditor的关键代码。

在130686行左右可以看到关键逻辑代码,可自行修改

image.png

Powered By 莆田云客互联  备案号:闽ICP备20013060号

搜索