改造Kindeditor之：自定义图片上传插件。 外加给图片增加水印效果的选择。

场景： 编辑部人士编辑文章时需要在文章中上传图片。但上传图片时需要增加是否增加水印的选择（有可能是自己公司的原创作品）。所以需要改造Kindeditor .

1: 删除Kindeitor 默认的参数对象里的Image  添加自定bareheadimage

有原来的

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", "|", "image", "multiimage",
"flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak",
"anchor", "link", "unlink", "|", "about"
],

变成

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","bareheadimage",
"flash", "media", "insertfile", "table", "hr", "emoticons", "baidumap", "pagebreak",
"anchor", "link", "unlink", "|", "about"
],

复制 kindeditor 下的image文件为 bareheadimage 并把里面的image.js 改名为bareheadimage.js 此文件下的也需要修改一下之处：

KindEditor.plugin("bareheadimage", function(K) {
var self = this, name = "bareheadimage",
allowImageUpload = K.undef(self.allowImageUpload, true),
formatUploadUrl = K.undef(self.formatUploadUrl, true),
allowFileManager = K.undef(self.allowFileManager, false),
//uploadJson = K.undef(self.uploadJson, self.basePath + "jsp/image_upload_watermark.jsp"),
uploadJson = this.basePath + "jsp/image_upload_watermark.jsp",  //后台处理的JSP  复制upload_json.jsp后进行了相应的修改。下面会说到

下面定义生成的HTML代码也要修改：

"<form id="local_image_upload" class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="" + target + "" action="" + K.addParam(uploadJson, "dir=image") +  "">",
//file
"<div class="ke-dialog-row">",
hiddenElements.join(""),
"<label style="width:60px;">" + lang.localUrl + "</label>",
"<input type="text" name="localUrl" class="ke-input-text" tabindex="-1" style="width:200px;" readonly="true" /> &nbsp;",
"<input type="button" class="ke-upload-button" value="" + lang.upload + "" /><br/>",
"<label style="width:60px;">" + lang.isWatermark + "</label>",  
"<select name="picture_watermark" id="picture_watermark" onchange="changeActionIsWatermark()"><option value="0">&nbsp;&nbsp;不加</option><option value="1">&nbsp;&nbsp;&nbsp;加</option></select>",
"</div>",

追加相应的更改action中参数的函数：到文件末尾：

function changeActionIsWatermark()
{
var isWatermark = $("#picture_watermark").val();
var of = $("#local_image_upload").attr("action");
if(of.indexOf("isWatermark") == -1)
{
of = of + "&isWatermark=" + isWatermark; 
}else
{
of = of.substr(0,of.length-1) + isWatermark;
}
$("#local_image_upload").attr("action",of);
}

其中：lang.isWatermark ： 需要在lang文件下的zh_CN.js下增加：

"bareheadimage.remoteImage" : "网络图片",
"bareheadimage.localImage" : "本地上传",
"bareheadimage.remoteUrl" : "图片地址",
"bareheadimage.localUrl" : "上传文件",
"bareheadimage.isWatermark" : "是否水印",
"bareheadimage.size" : "图片大小",
"bareheadimage.width" : "宽",
"bareheadimage.height" : "高",
"bareheadimage.resetSize" : "重置大小",
"bareheadimage.align" : "对齐方式",
"bareheadimage.defaultAlign" : "默认方式",
"bareheadimage.leftAlign" : "左对齐",
"bareheadimage.rightAlign" : "右对齐",
"bareheadimage.imgTitle" : "图片说明",
"bareheadimage.upload" : "浏览...",
"bareheadimage.viewServer" : "图片空间",

2： 复制 upload_json.jsp 为image_upload_watermark.jsp

并增加以下代码：

String isWatermark = request.getParameter("isWatermark");

if(isWatermark!=null && isWatermark.equals("1"))
{
//加水印
ImageUtils.pressText("bareheadzzq", savePath + "/" + newImgName, "宋体",Font.ITALIC, 0, 10, 30, 0);
}
//发送给 KE  
JSONObject obj = new JSONObject();        //在成功返回之前增加

ImageUtils中自己写的增加文字水印的方法：

public static int pressText(String pressText, String targetImg,
String fontName, int fontStyle, int color, int fontSize, int x,
int y) {
try {
File _file = new File(targetImg);
Image src = ImageIO.read(_file);
int wideth = src.getWidth(null);
int height = src.getHeight(null);
BufferedImage image = new BufferedImage(wideth, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = image.createGraphics();
g.drawImage(src, 0, 0, wideth, height, null);
g.setColor(Color.RED);
g.setFont(new Font(fontName, fontStyle, fontSize));
g.drawString(pressText, wideth - fontSize - x, height - fontSize
/ 2 - y);
g.dispose();
FileOutputStream out = new FileOutputStream(targetImg);
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
encoder.encode(image);
out.close();
} catch (Exception e) {
logger.error("加水印出现错误:" + e.getMessage(), e);
return -1;
}
return 1;
}

选择 加于不加水印的效果如下：

在调用的JSP中这么定义下。能够给编辑器中的按钮增加相应的提示

KindEditor.lang({
bareheadimage : "插入图片+barehead"
});