一、使用富文本编辑器kindeditor需引入文件如下:
<script charset="utf-8" src="<%=path %>/skin/js/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="<%=path %>/skin/js/kindeditor/lang/zh-CN.js"></script>
二、编辑器初始化
K.create('textarea[name="nr"]'中的name要使用页面中textarea 的name
urlType:定义了上传图片的相对路径其他参数(”absolute”、”domain”),默认为“”
item:定义显示的各个小图标
uploadJson:定义请求的后台地址
filePostName:注意这个参数他表示图片的name,后台接受的时候一定要名字一样
allowImageUpload:设置为true
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="nr"]', {
//resizeType : 1,
urlType:"relative",
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
uploadJson : context+"/xinwen/upload" ,//后台上传调用方法地址,返回json格式
filePostName: 'imgFiles',//类似于定义input的name
//allowPreviewEmoticons : true,
allowImageUpload : true,
afterCreate : function() {
var self = this;
},
afterBlur:function(){this.sync();},
});
});
</script>
三、html代码
<textarea id="addeditor_id" name="nr" style="width:58%;height:600px;border: 0 none; visibility:hidden;"></textarea>
四、java后台
/**
* 文件上传公共方法
*
* @param response
* @param request
* @param imgFile
* 单文件
* @return
*/
public Map<String, Object> uploadImg(HttpServletResponse response, HttpServletRequest request,
MultipartFile imgFile) {
response.setContentType("text/plain;charset=UTF-8");
Map<String, Object> map = new HashMap<String, Object>();
// 文件保存目录URL
//String saveUrl = "upload/img/";
// String saveUrl = "upload/";
String saveUrl = request.getServletContext().getRealPath("/upload//");
//String saveUrl = request.getServletContext().getContextPath();
// 最大文件大小
long maxSize = 102400000;
if (imgFile == null) {
return returnErrorMap("请选择文件!");
}
String imgFileFileName = imgFile.getOriginalFilename();
String fileType = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();// 文件类型
Map<String, String> fileTypeMap = new HashMap<String, String>();
fileTypeMap.put("image", "gif,jpg,jpeg,png,bmp");
if (fileTypeMap.containsKey(fileType)) {
return returnErrorMap("上传文件扩展名[" + fileType + "]是不允许的扩展名。");
}
if (imgFile.getSize() > maxSize) {
return returnErrorMap(
"[ " + imgFileFileName + " ]超过单个文件大小限制,文件大小[ " + imgFile.getSize() + " ],限制为[ " + maxSize + " ] ");
}
String newFileName = UUID.randomUUID().toString().replaceAll("-","") + "." + fileType;// 重新命名
try {
FileUtils.copyInputStreamToFile(imgFile.getInputStream(), new File(saveUrl+"\\"+newFileName));// 生成文件
System.out.println(saveUrl+"\\"+newFileName);
map.put("url","\\upload\\"+newFileName);
map.put("error", "0");
return map;
} catch (Exception e) {
return returnErrorMap("图片上传失败");
}
}
/**
*
* @param response
* @param request
* @param imgFiles
* 多文件
* @return
*/
@RequestMapping("/upload")
@ResponseBody
public String uploadImgs(HttpServletResponse response, HttpServletRequest request,
@RequestParam("imgFiles") MultipartFile[] imgFiles) {
response.setContentType("text/plain;charset=UTF-8");
String url = "";
Map<String,Object> obj = new HashMap<String,Object>();
try {
for (MultipartFile myFile : imgFiles) {
Map imgPath = uploadImg(response, request, myFile);// 上传方法
if (imgPath.get("error").equals("0")) {
url += imgPath.get("url");
}
}
obj.put("error", 0);// 上传成功
if (url.length() > 0) {
obj.put("url", url);
}
} catch (Exception e) {
e.printStackTrace();
obj.put("error", 1);// 上传失败
obj.put("url", url);
}
//map转json
JSONObject jsonObject = new JSONObject(obj);
String result = jsonObject.toString();
return result;
}
/**
* 错误提示
*
* @param message
* @return
*/
private Map<String, Object> returnErrorMap(String message) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("error", 1);
map.put("message", message);
return map;
}
五、效果图
六、插入到编辑框中图片大小如何自适应框呢?打开kindeditor-all.js找到insertimage修改即可:
insertimage : function(url, title, width, height, border, align) {
title = _undef(title, '');
border = _undef(border, 0);
var html = '<img src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
/*if (width) {
html += 'width="' + _escape(width) + '" ';
}*/
html += 'width="100%"';
if (height) {
html += 'height="' + _escape(height) + '" ';
}
if (title) {
html += 'title="' + _escape(title) + '" ';
}
if (align) {
html += 'align="' + _escape(align) + '" ';
}
html += 'alt="' + _escape(title) + '" ';
html += '/>';
return this.inserthtml(html);
},