首先引入相关js和jar包
jar:ueditor-x.x.x.jar
js:
页面中添加textarea标签
初始化百度编辑器
var editor = UE.getEditor('newsContent',{
//这里可以选择自己需要的工具按钮名称
toolbars:[[ 'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase','simpleupload','insertimage','attachment']],
//focus时自动清空初始化时的内容
autoClearinitialContent:false,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:300,
initialFrameWidth:1100,
enableAutoSave: false
//更多其他参数,请参考ueditor.config.js中的配置项
});
第一种将图片存入虚拟路径的方法(此方法用nginx的时候转发路径没发配置,所以局限较大)
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "../../../file1/img/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
tomcat配置的虚拟路径为与tomcat同级的file文件夹(如果不能回显,自己慢慢调整路径)
第二种方法是自定义上传路径
1.首先需要在js中定义上传图片的接口如下(此方法配置nginx转发的时候只要注意更改config.json中的imageUrlPrefix即可):
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl') {
return 'http://localhost:8082/bim/WSupload/uploadimage';//这就是自定义的上传地址
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
2.config.json中
"imageUrlPrefix": "http://localhost:8082/file1", /* 图片访问路径前缀 */
"imagePathFormat": "", /* 上传保存路径,可以自定义保存路径和文件名格式 */
3.后台接口方法
@RequestMapping(value = "/uploadimage", method = RequestMethod.POST)
@ResponseBody
public Map uploadimage(@RequestParam(value = "upfile") MultipartFile upfile) {
Map map = new HashMap<>();
String fileName=upfile.getOriginalFilename();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String filename = sdf.format(new Date()) + new Random().nextInt(1000);
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
filename=filename+"."+fileExt;//存入虚拟目录后的文件名
File uploadedFile = new File("H:\\file1\\img", filename);//存入虚拟目录后的文件
try {
upfile.transferTo(uploadedFile);//上传
map.put("url", "/img/"+filename);//这个url是前台回显路径(回显路径为config.json中的imageUrlPrefix+此处的url)
map.put("state", "SUCCESS");
map.put("original", "");
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}
后台返回json规范:
测试。。。