记一次Ueditor使用

来源:csdn博客 分类: 文章浏览史 发布时间:2022-02-28 20:33:18 最后更新:2022-02-28 浏览:297
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2022-02-28 20:33:18

         最近开发一个后台项目,前端使用的是elementui,而且前台使用的是原生的富文本。直接上传图片存储的是二进制,在小数据的范围内没什么问题,但是大数据的情况下,从数据库到页面的展示经理的路程太过漫长。并且前端的判断机制竟然是五秒算是超时???十几兆的数据从磁盘到内存再到网络再到本地,enmmmm。。。我问前端你就不能修改一下elementui的富文本让它上传的时候请求我的文件接口?sorry,I can‘t。好吧,人家这样说,我心里也没脾气,不过对这种态度真的是。

到了最后,妥协。用什么,ueditor。 用就用吧,我以前自己写也用过别的富文本,基本是自己设置的配置文件。前端自己弄就行了,没想到,这只是噩梦的开始…

         首先,配置文件conf.json放后台请求,其次ActionEnter等百度的核心类需要导入,一起其他的一系列的附属的jar我们就不说了,maven都有自己的坐标。到百度的核心类就垮了。本地用引入外部jar的时候开发没问题,打包就有问题。这里两种解决办法,一种使用maven的引入外部jar到本地仓库的方法。另一种把所有的类粘到自己项目里。考虑到有些东西需要自己修改,选择了后者:

在这里插入图片描述

把所有相关的类引入自己的项目。这些准备工作可以参照此篇博文:

https://www.cnblogs.com/ocean-sky/p/7132319.html

其中一些准备性工作已经挺透彻了,可以直接借鉴。

没有前段辅助测试或者前端不怎么友好的可以直接下载上面链接的demo,使用webstorm或者其他ide直接运行即可。
首先第一步的时候是请求配置文件http://xxxx.xxx.com/xxx/xxxController?action=config,这一步基本没有什么问题,加载请求成功后台配置正确即可正确的显示,注意控制台的报错信息。

配置信息加载正常,我们就可以选择图片上传按钮进行文件上传。如果出现无效的action注意一下自己conf.json是不是这个样子:
在这里插入图片描述
可能我们以为这是自己文件上传的action,这也是我用其他的编辑器养成的习惯,但这里不行。这里不要改,因为这些和百度后台的配置有关。

在ActionEnter里面的invoke主要方法里面有如下代码
在这里插入图片描述
然后百度根据这个来判断调用那些方法。
进入ActionMap我们可以看到:

在这里插入图片描述
这些我们可以看到这些是为前台的很多按钮准备的不同状态码,所以我们只需要把上面的imageActionName变为
uploadimage即可
在这里插入图片描述
到这你以为完了吗?没有你会发现再次上传会提示你:
在这里插入图片描述
为什么呢,我们在控制台输出我们ActionEnter里面的ActionCode,或者调试看一下数值,我们发现是1.找到对应的case,发现会调用Uploader里面的方法:
在这里插入图片描述
这个方法是根据他判断的是否是base64来判断执行的那个方法,看我们的请求:
在这里插入图片描述
看一看到明显不是base64编码,那么执行下面的方法 BinaryUploader.save(this.request, this.conf);
进入这个方法我们看一看:

在这里插入图片描述
莫名其妙的就是找不到上传的数据,可能和我其他的配置有关,时间问题就没有深究。

既然找到了问题所在,那么就可以解决了,既然你自己的方法不行,我们就自己写一个。

首先我们确定我们呢的ActionCode为2,那么在我们的ActionEnter对应的case我们书写自己的方法:

在这里插入图片描述
其实上边的只是用了servlet上传文件的方式,而且只是一个简版,没有判断除了图片还有其他field情况,不过只用来富文本的图片添加还是没问题的。现在很多框架都有文件上传功能,自己以前也没有用servlet操作过文件,这次的经历也丰富了自己的servlet知识。

OK,现在我们再来测试一下我们的接口。
在这里插入图片描述
OK,大功告成。可以用了 ,好开心。
当然,可能有同学遇到一些问题比如说:
在这里插入图片描述
查看控制台我们可以看到:
在这里插入图片描述
很明显的是json转换问题吗,找到提示的ueditor.all.js对应的位置。
在这里插入图片描述
当然这个主要看我们上个图片提示的行号,把这行注释掉就行了。
另外,上面这个问题主要是因为我们的的响应头是这样的:

在这里插入图片描述
如果你的响应头是text/plain的话就没这个问题了。

还有就是有的ueditor默认请求会加一个callback这个参数,如果前端不知道怎么去掉这个参数,我们记得修改ActionEnter里面的exec方法:
在这里插入图片描述
这两种处理方式任选一个即可。

以上就是个人对ueditor使用的一点心得,如果有不对的地方希望指正。

不忘初心,方得始终。

php技术微信