第一步:https://ueditor.baidu.com/website/download.html#mini下载插件 (小编选用的是jsp版本)
第二步:在后台项目存放插件
第三步:新建测试页面,在改页面引入需要的js和样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>bbs.html</title>
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="umditor/themes/default/css/umeditor.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="umditor/third-party/jquery.min.js"></script>
<script type="text/javascript" src="umditor/umeditor.config.js"></script>
<script type="text/javascript" src="umditor/umeditor.min.js"></script>
<script type="text/javascript" src="umditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="umditor/bbs.js"></script>
</head>
<body>
<script type="text/plain" id="editor" name="editor" style="width:auto;height:240px;">
</script>
</body>
</html>
第四步:在js中进行初始化编辑器
$(function(){
var um = UM.getEditor('editor');
});
第五步:进行页面访问,文本编辑器可以正常显示
第六步:开始上传图片并保存到后台服务器
(1)后台是用java进行图片的上传并保存到服务器的指定位置,结合MultipartFile进行上传,且返回的时候必须以json格式返回四个字段,否则没办法显示图片
@RequestMapping(method = { RequestMethod.GET, RequestMethod.POST })
public void handle(HttpServletRequest request, HttpServletResponse response) {
// 转型为MultipartHttpRequest:
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件:
MultipartFile uploadFile = multipartRequest.getFile("upfile");
// UEditor传到后台的是这个upfile,其他的文件上传,应该也差不多是这个,还没去研究,断点一下就知道了
String fileName = uploadFile.getOriginalFilename();
String fileUploadPath = CommonUtil.trimString(appConfig
.get("backstageBbsImgMediaPath"));
if (fileUploadPath == null) {
throw new AdminControllerException("1000", "服务器未指定存放文件的路径");
}
File outputFile = new File(fileUploadPath + fileName);
try {
uploadFile.transferTo(outputFile);
} catch (Exception e) {
throw new AdminControllerException("1003", "上传图片出现异常");
}
UploadImageOutput output = new UploadImageOutput();
output.setOriginal(outputFile.getName());
output.setTitle(outputFile.getName());
String bbsImageShowRootPath = CommonUtil.trimString(appConfig
.get("bbsImageShowRootPath"));
if (bbsImageShowRootPath == null) {
throw new AdminControllerException("1000", "服务器未指定存放文件的路径");
}
output.setUrl(bbsImageShowRootPath + fileName);
output.setState("SUCCESS");
JSONObject jsonObj = new JSONObject(output);
String result = jsonObj.toString();
try {
CommonUtil.getHttpServletResponse().setCharacterEncoding("UTF-8");
CommonUtil.getHttpServletResponse().getWriter().write(result);
CommonUtil.getHttpServletResponse().getWriter().flush();
} catch (Exception e1) {
}
}
(2).将后台的图片上传接口在umeditor的配置文件中umditor/umeditor.config.js进行修改和配置
window.UMEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UMEDITOR_HOME_URL : URL
//图片上传配置区
,imageUrl:window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/" //图片上传提交地址
,imagePath:URL + "jsp/" //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
,imageFieldName:"file_body" //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
(3).上传图片的时候有可能会出错上传出错,需要修改umditor\dialogs\image\image.js在uploadComplete函数添加 r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');
uploadComplete: function(r){
var me = this;
try{
r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');
var json = eval('('+r+')');
Base.callback(me.editor, me.dialog, json.url, json.state);
}catch (e){
var lang = me.editor.getLang('image');
Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
}
},
(4).上传图片之后,如果没有显示,需要修改umditor\dialogs\image\image.js在callback函数
经过四个步骤图片就能上传-->保存--->回显
第七步:获得编辑器的内容并保存到后台服务器,主要通过UM.getEditor('editor').getContent();获得编辑器中的内容
function addBbsHtml(){
var editor1=UM.getEditor('editor').getContent();
$.ajax({url:'後台地址',
data:{editor:editor1},
dataType:'json',
type:'post',
success:function(result){
if(result.state==0){
alert("添加成功")
}else{
alert("添加失败"+result.msg);
}
}
});
}