場景： 編輯部人士編輯文章時需要在文章中上傳圖片。但上傳圖片時需要增加是否增加水印的選擇（有可能是自己公司的原創作品）。所以需要改造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'
});