富文本编辑的组件有很多，大名鼎鼎的KENDO UI中自然也有，但是默认功能中，只能包含网络图片，
而如果要实现本地上传图片，KENDO UI也提供了相应的功能，但必须实现KENDO规定的多个接口，
而且功能过于丰富，有时项目并用不到，所以我想利用自定义按钮来实现，下面就是实现过程：
1、先在JSP中定义textarea标签，作为富文本编辑框的占位。
<div class="form-group">
<label class="col-xs-2 control-label">项目简述：</label>
<div class="col-xs-8">
<textarea id="project-desc" type="text" class="form-control" maxlength="10000"></textarea>
</div>
</div>
2、在JS脚本中定义其为KendoEditor,并设置其默认按钮，及自定义按钮。
$("#project-desc").kendoEditor({
tools: [
"formatting",
"bold", "italic", "underline",
"justifyLeft", "justifyCenter", "justifyRight",
"insertUnorderedList", "insertOrderedList", "indent",
"createTable",
{
name: "image",
tooltip: "Insert image",
template: "<button type='button' class='k-button' onclick='uploadimg();'><span class='glyphicon glyphicon-picture' aria-hidden='true'></button>",
}
],
keydown: function(e) {
$(".k-editable-area").tooltip('destroy');
}
});
name为标签的名字，tooltip为悬停的提示，template为按钮的样式。
3、uploadimg()方法是打开文件上传选择窗口，这里我使用的是kendoWindow。
JSP代码：
<div id="upload-img-win">
<div class="container-fluid">
<form id="editorUploadImg" action="${ctx }/Detail/uploadImg" enctype='multipart/form-data'>
<input id="srcEditor" type="hidden"/>
<div class="form-group ld-bottom" id="ImgUploadGroup">
<label class="col-xs-2 control-label">图片上传：</label>
<div class="col-xs-8">
<button id="uploadImg-btn" type="button" class="btn btn-primary" onclick="openImgSelectFile();">选择文件</button>
<label id="uploadImgFileName" class="control-label"></label>
<input id="uploadImg" name="uploadImg" type="file" class="hidden" onchange="seletedImgFile();"/>
</div>
</div>
<div class="row ld-top ld-bottom">
<div class="col-xs-10">
<div class="pull-right">
<button id="doc-save-btn" type="button" class="btn btn-primary" onclick="uploadImgWinObj.save()">保存</button>
<button id="doc-cancel-btn" type="button" class="btn btn-default" onclick="uploadImgWinObj.close()">关闭</button>
</div>
</div>
</div>
</form>
</div>
</div>
js代码：
var uploadImgWinObj = null;
//上传图片窗口
function uploadImgWin() {
var me = this; this.winEl = $("#upload-img-win");
this.winEl.kendoWindow({
draggable : true,
width : "650px",
modal : true,
pinned : false,
title : "选择图片",
visible : false,
animation : false,
resizable : false,
actions : ["Close"]
}); this.kObj = this.winEl.data("kendoWindow") this.open = function(srcEditor) {
clearInput("#upload-img-win");
$("#uploadImgFileName").html("");
$("#uploadImg").val("");
$("#srcEditor").val(srcEditor);
this.kObj.center();
this.kObj.open();
} this.close = function() {
this.kObj.close();
} this.save = uploadImg;
} //上传图片
function uploadImg(){
if($("#uploadImg").val()==""){
markError("#uploadImg","没有选择任何文件！","#editorUploadImg")
return;
} $("#editorUploadImg").ajaxSubmit({
type: "post",
success: function (data) {
if(data!="-99"){
// bootbox.alert("操作成功！");
var srcEditor = $("#srcEditor").val();
var editor = $(srcEditor).data("kendoEditor");
editor.exec("insertHTML", { value: "<img src='"+ ctx + "/" + data +"' >"});
uploadImgWinObj.close();
}else{
uploadImgWinObj.close();
bootbox.alert("操作失败！");
}
},
error: function(e){
bootbox.alert("操作失败！");
uploadImgWinObj.close();
}
});
} //选择图片
function openImgSelectFile(){
$("#uploadImg").click();
} //选中图片后，显示图片名称
function seletedImgFile(){
$("#uploadImgFileName").html($("#uploadImg").val());
} function uploadimg(){
uploadImgWinObj.open("#project-desc");
} $(document).ready(function() {
uploadImgWinObj = new uploadImgWin();
}
openImgSelectFile和seletedImgFile是对文件选择控件的包装，为了显示效果好看些。
uploadImg方法采用了ajaxSubmit方式进行提交，这里需要引用jquery.form.js插件，
该插件可以使用AJAX异步方式上传文件，http://plugins.jquery.com/form/ 这里可以下载。
4、最后在Controller里实现保存上传图片功能。
/**
* 上传图片
*/
@RequestMapping(value="/uploadImg")
@ResponseBody
public String uploadImg(HttpSession session,HttpServletRequest request,HttpServletResponse response,
@RequestParam(value = "uploadImg", required = false) MultipartFile file) {
try { User loginUser = (User) session.getAttribute("loginUser"); // 获得上传文件的格式
String fileName = "";
String path = "";
String url = "";
//无文件则不做文档保存动作
if(file!=null && !"".equals(file.getOriginalFilename())) {
fileName = file.getOriginalFilename();
String format = fileName.substring(fileName.lastIndexOf(".")); path = request.getSession().getServletContext().getRealPath(""); //使用UUID命名，防止文件重名
UUID uuid = UUID.randomUUID();
String newFileName = uuid.toString()+format;
url = "resources/upload/"+loginUser.getUserId()+"/img/"+ newFileName;// 文件名 path = path + File.separator + "resources" + File.separator + "upload"+ File.separator+loginUser.getUserId()+ File.separator + "img";
File diagramDirFile = new File(path);
if (!diagramDirFile.exists()) {
//如果文件夹不存在，则创建它
diagramDirFile.mkdirs();
}
path = path + File.separator + newFileName;
//保存上传文件
FileCopyUtils.copy(file.getBytes(), new FileOutputStream(path)); } return url; } catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return "-99";
} }
服务器回传上传图片的URL，在Editor中插入该地址即可展示图片