前言:
ueditor百度富文本编辑器,bug是真的多,走一步一个bug啊,折腾了好几天了,下面个把我整好的分享给大家!
ueditor+springboot :
上传到项目jar包项目外的服务器文件夹(用的是自己后台的上传方法),并实现图片回显
开始:
1.先按照这个把ueditor整合到项目中:
https://blog.csdn.net/qq_38431927/article/details/98985681
接下来就是改配置了
2.首先我们springboot我是打成jar包的形式部署的,所以用上述链接中加载config.json方式不好使
改成:(注意这里把config.json直接放到resources下)
@Controller
public class UeditorConfig {
@Value(value="classpath:config.json")
private Resource resource;
@RequestMapping(value = "/config")
public void getUEConfig(HttpServletRequest request, HttpServletResponse response){
Resource res = new ClassPathResource("config.json");
response.setHeader("Content-Type" , "text/html");
try {
BufferedReader br = new BufferedReader(new InputStreamReader(resource.getInputStream()));
StringBuffer message=new StringBuffer();
String line = null;
while((line = br.readLine()) != null) {
message.append(line);
}
String result = message.toString().replaceAll("/\\*(.|[\\r\\n])*?\\*/","");
JSONObject json = JSONObject.fromObject(result);
PrintWriter out = response.getWriter();
out.print(json.toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
这里要注意一下ueditor.config.js中改一下
var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;
serverUrl: server_url+"/config"
3.下面改自定义上传:
在你放编辑器的页面的js中放入以下代码:
'/demo/uploads'; //对应后台上传文件的方法
//建议使用工厂方法getEditor创建和引用编辑器实例,
//如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '/demo/uploads'; //对应后台上传文件的方法
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
4.在你后台上传的方法中注意:
返回格式一定要用json形式,必须要用state 和 url 字段
原因:在image.js中要用到
看到这里你应该明白了imageUrlPrefix是图片回显路径的访问域名
这里配置成你的图片回显访问域名!!
结束!!!
希望对你有所帮助!