Kindeditor官方文档:http://kindeditor.net/docs/option.html#pasteType
Kindeditor内部有直接粘贴图片到文本框内的操作,为pasteType属性,可供选择的参数有 [ 0, 1, 2 ] 。
- 0:禁止粘贴,
- 1:纯文本粘贴,
- 2:HTML粘贴(默认值)
但是,默认操作会使得图片以二进制格式显示到输入框内,提交内容中的图片如果不进行处理那就直接存储到数据库中,那体量是相当庞大的,于是乎网上一顿搜寻,终于找到合适的处理方式。
主要设置两个属性值:
- pasterType: 1
- afterCreate: function() { … }
话不多说,上代码,详细看注释内容:
KindEditor.ready(function (K) {
var editor = K.create('#editor', {
cssPath: '/js/kindeditor/plugins/code/prettify.css',
uploadJson: '/Generalhandlingevent/upload_json.ashx?action=EditorFile&IsWater=1',
fileManagerJson: '/Generalhandlingevent/file_manager_json.ashx',
themeType: 'simple',
pasteType: 1, //0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
afterCreate: function () {
var editerDoc = this.edit.doc;//得到编辑器的文档对象
$(editerDoc).bind('paste', null, function (e) {
/*获得操作系统剪切板里的项目,e即kindeditor,
*kindeditor创建了originalEvent(源事件)对象,
*并指向了浏览器的事件对象,而chrome浏览器
*需要通过clipboardData(剪贴板数据)对象的items
*获得复制的图片数据。
*/
var ele = e.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//判断文件类型
if (ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1) {
var file = ele[i].getAsFile();//得到二进制数据
//创建表单对象,建立name=value的表单数据。
var formData = new FormData();
formData.append("imgFile", file);//name,value
//用jquery Ajax 上传二进制数据
$.ajax({
url: '/Generalhandlingevent/upload_json.ashx?action=EditorFile&IsWater=1',//dir=image
type: 'POST',
data: formData,
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
dataType: "json",
beforeSend: function () {
//console.log("正在进行,请稍候");
},
success: function (responseStr) {
//上传完之后,生成图片标签回显图片,假定服务器返回url。
var src = responseStr.url;
var imgTag = "<img src='" + src + "' border='0'/>";
console.log(editor.html());
//console.info(imgTag);
//kindeditor提供了一个在焦点位置插入HTML的函数,调用此函数即可。
editor.insertHtml(imgTag);
},
error: function (responseStr) {
console.log("error");
}
});
}
}
})
},
items: [
'source', 'undo', 'redo', '|', "formatblock", 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link', '|', 'fullscreen']
});
这样就能解决截屏粘贴图片数据量庞大的问题,同时,也不会让步骤复杂…