KindEditor图片上传路径URL的处理

最近的项目中使用了KindEditor作为富文本编辑器进行文本编辑处理。KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。官网地址：http://www.kindsoft.net/。

KindEditor能够进行图片上传，上传完毕后可以马上在文本编辑器中看到刚刚上传的图片，具体实例下载KindEditor之后，包里面有一个demo，可以参考。

使用KindEditor上传图片，图片上传的路径是由用户自行指定的，KindEditor展示上传的图片时，需要一个路径作为图片img的src,这个路径由处理图片的JSP指定，当拼接好url之后，使用PageContext的getOut,获取输出流进行输出：

       

//传送给KE，作为图片路径
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);

out.println(obj.toJSONString());

这个放在JSONObject中的url,KindEditor.js会接收，并获取url作为图片src属性的处理，具体在kindeditor.js中：

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) + '" ';
}
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);
}

insertimage的function参数url就是在处理图片上传的JSP中放入JSONObject的url。如果我们需要对上传的图片属性在入库之前做一些处理，就可以通过更改这个函数来改变img的属性。