springboot下使用ueditor编辑器

因为工作原因，最近需要在一个之前的系统上增加一个门户文章内容管理的功能；

此系统当时的技术选型为：后台springboot，maven项目结构，前端以jQuery为主、vue为辅，弹出层使用layui.layer，编辑器为ueditor或者umeditor。

本系统其实已经开启了新版的开发进程，现阶段的开发已经更多的开始使用以vue-cli为基础的前后端分离开发模式，但是由于新版功能离完成还差得远，所以依然在之前老版本的基础上做改动。并且现有的在vue-cli模板下开发的功能并不能直接照搬使用，因此需要再返回尝试原有功能。

之前在一个jfinal+jQuery的系统中有使用此编辑器，所以就从此系统中将页面拷贝过来进行修改。

我创建的springboot项目packging的类型为war，所以我的有些静态资源未见可以防止在webapps下，后续在其它项目中再使用此功能时，静态资源文件应按springboot规范放置在static文件夹下。

下面说一下实施过程：

1. 在maven中央仓库搜索uedtior，引入依赖包。这一步也可以把从官方下载的文件夹中的jar包放在lib目录下，最终效果是一样的。 (ueditor只更新到这个版本，可惜了；下面的依赖虽然不是官方的，但其实没什么影响)

<dependency>
	<groupId>com.gitee.qdbp.thirdparty</groupId>
	<artifactId>ueditor</artifactId>
	<version>1.4.3.3</version>
</dependency>

1. 在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();
	}

1. 将从官网下载的ueditor包，放在静态资源目录下。 把ueditor.config.js中serverUrl的值改为自己的请求路径

window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL

        // 服务器统一请求接口路径
        , serverUrl: "/file/ueditorImg"

1. 在静态资源根目录下创建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变了不兼容。暂时推测第一个可能性大一些

转载于:https://my.oschina.net/u/3058876/blog/2086095