为KindEditor在线编辑器增加图片水印和缩略图功能

2018年3月9日 38,183 浏览数 没有评论

  轻量级开源KindEditor在线编辑器非常好用,虽然作者已多年不更新了,但阻挡不了我对它的喜爱。在使用之中,总是想为它加点功能,这样便可使工作更高效!

  我们在图片上传时总想自动添加水印和生成缩略图,但这些实用小功能却没见有人制作,遂Google一下资料自己捣鼓了一个,分享给大家!

  直接放出源码,对应版本为最新的“4.1.11”:

  第一步:修改\editor\kindeditor-all.js中的第7000行,用下面代码替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 + '" />',
'<div class="ke-dialog-row">',
'<label style="width:60px;">是否水印</label>',
'<label><input name="iswater" type="radio" value="1" />加水印</label>',
'<label><input name="iswater" type="radio" value="0" checked="checked" />不加水印</label>',
'</div>',
'<div class="ke-dialog-row">',
'<label style="width:60px;">缩略图</label>',
'宽:<input name="thumb_width" type="text" class="ke-input-text" style="width:40px;" /> ',
'高:<input name="thumb_height" type="text" class="ke-input-text" style="width:40px;" />',
'</div>',
'</form>',
'</div>',
'</div>'

  目的是:在图片上传对话框中设置水印和缩略图选项,以便可控。
阅读全文…