SpringBoot整合Ueditor富⽂本编辑器下载
下载完成后解压，得到 utf8-jsp ⽂件夹，将其重命名为 ueditor，再将其复制到springboot 项⽬中
使⽤
1.在项⽬中添加以下依赖：
<!-- ueditor-->
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
<!-- 跨域上传⽂件-->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-core</artifactId>
<version>1.18.1</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.18.1</version>
</dependency>
然后重点关注这些⽂件
config.json：上传功能的主要配置项
2.在页⾯中引⽤（此处⽤的是Thymeleaf）：
<script type="text/javascript"charset="utf-8"src="/static/fig.js"></script> <script type="text/javascript"charset="utf-8"src="/static/ueditor/ueditor.all.min.js"></script> <script type="text/javascript"charset="utf-8"src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>
3.实例化编辑器：
<div>
<script name="text"id="editor"type="text/plain" ></script>
</div>
<script type="text/javascript">
/*实例化编辑器 */
var um =UE.getEditor('editor');
</script>
注意：此时上传功能不正常，可以在开发者⼯具中看见“后端配置项不正确，上传功能⽆法使⽤”的情况
问题缘由：
请求过来了，它会⾛ controller.jsp，但是 springboot 默认是不⽀持 jsp 的，然⽽这个 jsp 它是指向 config.json 的，打开config.json，第⼀个就是图⽚上传的相关配置：
所以就是 springboot 它⽆法访问 controller.jsp，也就⽆法读到 config.json ⾥的相关配置，所以报错。
解决办法：
思路：既然 springboot ⽆法通过 jsp 访问到 config.json，那就不⾛ jsp，直接让它获得 config.json ⾥的配置。ueditorapi文档
1.新建⼀个Controller，内容如下：
/**
* 上传配置：即不⾛config.json，模拟config.json⾥的内容，解决后端配置项不正确，⽆法上传的问题
* @return
*/
@RequestMapping("/ueditor/config")
@ResponseBody
public String uploadConfig(){
String s ="{\n"+
"            \"imageActionName\": \"uploadimage\",\n"+
"                \"imageFieldName\": \"upfile\", \n"+
"                \"imageMaxSize\": 2048000, \n"+
"                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n"+
"                \"imageCompressEnable\": true, \n"+
"                \"imageCompressBorder\": 1600, \n"+
"                \"imageInsertAlign\": \"none\", \n"+
"                \"imageUrlPrefix\": \"\",\n"+
"                \"imagePathFormat\": \"/upload/images/{yyyy}{mm}{dd}/{filename}\" }";
return s;
}
2.修改 fig.js ⾥的 serverUrl 为上⾯定义的 url
3.因为SpringBoot项⽬是以jar打包的，我希望将⽂件上传到项⽬⽬录中，因此我新建⼀个SSM项⽬（fileUploadServer）作为⽂件上传服务器，即实现跨服务器⽂件上传
创建⽂件服务器流程：
新建⼀个maven项⽬，选择web⾻架创建：
项⽬创建好后，不需要做任何配置，只需配置tomcat启动即可
启动⽂件服务器，在浏览器访问：
4.接下来在配置编辑器的页⾯配置⼀下上传：
// ⼿动指定上传⽂件调⽤的接⼝（不同⽂件类型不同接⼝）
UE.Editor.prototype._bkGetActionUrl = UE.ActionUrl; UE.ActionUrl = function(action) {
// 这⾥很重要，很重要，很重要，要和配置中的imageActionName值⼀样    if(action == 'uploadimage'){
// 这⾥调⽤后端我们写的图⽚上传接⼝
return '/ueditor/upload';
}else if(action == 'uploadfile'){
return '/ueditor/upload';
}else{
return this._bkGetActionUrl.call(this, action);
}
};
即：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。