因为工作原因,最近需要在一个之前的系统上增加一个门户文章内容管理的功能;
此系统当时的技术选型为:后台springboot,maven项目结构,前端以jQuery为主、vue为辅,弹出层使用layui.layer,编辑器为ueditor或者umeditor。
本系统其实已经开启了新版的开发进程,现阶段的开发已经更多的开始使用以vue-cli为基础的前后端分离开发模式,但是由于新版功能离完成还差得远,所以依然在之前老版本的基础上做改动。并且现有的在vue-cli模板下开发的功能并不能直接照搬使用,因此需要再返回尝试原有功能。
之前在一个jfinal+jQuery的系统中有使用此编辑器,所以就从此系统中将页面拷贝过来进行修改。
我创建的springboot项目packging的类型为war,所以我的有些静态资源未见可以防止在webapps下,后续在其它项目中再使用此功能时,静态资源文件应按springboot规范放置在static文件夹下。
下面说一下实施过程:
- 在maven中央仓库搜索uedtior,引入依赖包。这一步也可以把从官方下载的文件夹中的jar包放在lib目录下,最终效果是一样的。 (ueditor只更新到这个版本,可惜了;下面的依赖虽然不是官方的,但其实没什么影响)
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
- 在controller中写action,接管本来由官方提供的jsp页面来做的内容。
由于springboot默认不支持jsp,自己再配置也是麻烦,而且为了这一个编辑器的问题再配置jsp也没多大意义,所以考虑自己写action对其进行接管; 此处需要注意的是,不限定请求时的http动词,因为编辑器会做多种不同类型的请求。
@RequestMapping("/ueditorImg")
public String a(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");
String fileDir = request.getServletContext().getRealPath("/");
return new ActionEnter( request, fileDir ).exec();
}
- 将从官网下载的ueditor包,放在静态资源目录下。 把ueditor.config.js中serverUrl的值改为自己的请求路径
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: "/file/ueditorImg"
- 在静态资源根目录下创建file文件夹,将jsp文件夹中的config.json拷贝到file文件夹下(默认存储路径为‘upload/ueditor/jsp/upload’,可以根据自己存储路径进行调整)
其它问题:
- 在弹出层中使用编辑器的图片上传和地图时,会出现图片上传层及地图层被遮挡,这是因为layer的zIndex - 层叠顺序默认:19891014(贤心生日 0.0),所以,我们将UEditor的zIndex修改为99999999即可解决;位置在ueditor.config.js第64行左右,zIndex : 99999999
- 百度地图的插入动态地图不能用,推测有两个原因,a、需要申请apikey,以前申请的忘了,有时间了再注册一个;b、api变了不兼容。暂时推测第一个可能性大一些