SpringMVC整合UEditor
由于项目需要,前端需要在线编辑文档,那么就要提供丰富一点的编辑器。找了半天,前端跟我说只能用Ueditor。这还是个国产的,baidu的。那个API我反正是看不懂。整合了各方博客资料,终于用了两天把这个东西搞出来了。说真的,网上的博客是真的难看懂。
其实搞来搞去,只要照着这个https://www.cnblogs.com/yinz/p/5502405.html,这个博客来就行了。
主要用到的config.json和ueditor.config.js。我是采用的修改源码的方式。所以需要将UEditor的示例源码,放到自己项目中来。
第一步,将百度源码放到自己的项目中来
可以到UEditor官网去下载,https://ueditor.baidu.com/website/download.html,我下载的是完整源码版。解压源码路径为\ueditor-1.4.3.3\jsp\src。
需要注入依赖
<!-- https://mvnrepository.com/artifact/com.gitee.qdbp.thirdparty/ueditor -->
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
当然如果你不是springMVC或者springBoot你也可以到\ueditor-1.4.3.3\jsp\src\lib这个路径下找到需要支持的jar,导入即可。
第二步,新建一个UeditorController类和修改ConfigManager类
Ueditor
@Controller
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping("/dispatch")
public void config(HttpServletRequest request, HttpServletResponse response) {
// response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
response.setHeader("Content-Type" , "text/html");
try {
String a = request.getRequestURI();
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
ConfigManager
private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
rootPath = rootPath.replace( "\\", "/" );
this.rootPath = rootPath;
this.contextPath = contextPath;
/*if ( contextPath.length() > 0 ) {
this.originalPath = this.rootPath + uri.substring( contextPath.length() );
} else {
this.originalPath = this.rootPath + uri;
}*/
this.originalPath = rootPath + "static" + File.separator +
"ueditor" +File.separator + "jsp" + File.separator + "controller.jsp";
///EdwManage/src/main/webapp/static/ueditor/jsp/controller.jsp
this.initEnv();
}
这个类的作用就是用来与前端进行交流的唯一通道,copy一下就好了
第三步,如果前端没有\ueditor-1.4.3.3\jsp\config.json和\ueditor-1.4.3.3\jsp\controller.jsp这两个文件,那么就把整个jsp复制到前端文件下,目录如下
然后就是修改ueditor.config.js和jsp\config.json,即可。修改如下
ueditor.config.js
var getRootPath = function (){
//获取当前网址
var curWwwPath=window.document.location.href;
//获取主机地址之后的目录
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址
var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
}
/**
* 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。
* 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。
* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
*/
var applicationPath = getRootPath();
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
var serverURL = applicationPath;
/**
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: serverURL + "/ueditor/dispatch"
主要的目的是修改serverUrl,让它能够识别后台UEditorController接口,从而让前端能够知道我要进行图片上传。
到这一步,你应该能看到如下
只是说你没有配置config.json,上传图片是无法显示的。
config.json
修改imagePathFormat即可,imageUrlPrefix即为项目访问前缀,比如我的http://localhost/8080/Test。也可以不加,应该UEditor默认是网站根目录。这个可以参考百度的APIhttp://fex.baidu.com/ueditor/#server-path。这个里面做了很详细的说明。
最后由于我的项目是war包到Tomcat下运行的,但是上传的图片是保存到项目里的。也就是说每更新一次就要将图片复制备份一下,除非是将图片放到其他文件夹下。但是API建议说使用根路径。如果项目更新幅度不大,还是不要修改吧。由于我的项目没有这样做,所以就没有测试。但是参考API还是能做到的。
希望能帮助到你