思路解析：监听paste事件，判断剪贴板的内容，如果是图片类型，使用xmlhttprequest上传到服务器，并在文本框中将图片返回的url改为markdown格式。
html
<textarea style="height: 220px; width:200px;resize: none; box-shadow: none; border: 1px solid black;" id="content"></textarea>
首先监听paste事件
$('#content').on("paste",function(e){
});
获得剪贴板的内容，chrome浏览器通过e.originalEvent.clipboardData获得；IE浏览器通过window.clipboardData获得。
$('#content').on("paste",function(e){
//判断图片类型的正则
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
var e = e || event;
//IE支持window.clipboardData,chrome支持e.originalEvent.clipboardData
var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
if(!(clipboardData&&clipboardData.items)){
return;
}
});
通过item.kind和type属性判断剪贴板的内容是不是图片
//判断图片类型的正则
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
for(var i=0,length=clipboardData.items.length;i<length;i++){
var item=clipboardData.items[i];
if(item.kind==='file'&&isImage.test(item.type)){
img=item.getAsFile();
}
通过getAsFile()就拿到了图片文件
image.png
通过FormData将图片文件上传到服务器
//服务器地址
var url='/common/upload';
var contentE=$('#content');
var formData=new FormData();
//将得到的图片文件添加到FormData
formData.append('file',img);
//上传图片
var xhr=new XMLHttpRequest();
//上传结束
xhr.onload=function () {
var data=JSON.parse(xhr.responseText);
//console.log(data)
if (data.code === 200) {
if (contentE.val().length === 0) {
//转换成markdown格式，插入到光标处
contentE.insertAtCousor("![image](" + data.detail + ")\r\n");
} else {
contentE.insertAtCousor("\r\n![image](" +
data.detail + ")");
}
var currentPosition = contentE.getSelectionEnd();
contentE.setSelection(currentPosition);
}
}
xhr.open('POST',url,true);
xhr.send(formData);
//当剪贴板里是图片时，禁止默认的粘贴
return false;
服务器响应内容
image.png
实现效果
image.png
贴一下完整代码
/*smc 2018.12.26 图片粘贴功能实现*/
$('#content').on("paste",function(e){
//判断图片类型的正则
var isImage=(/.jpg$|.jpeg$|.png$|.gif$/i);
var e = e || event;
var contentE=$('#content');
var img=null;
//IE支持window.clipboardData,chrome支持e.originalEvent.clipboardData
var clipboardData = e.originalEvent.clipboardData || window.clipboardData;
if(!(clipboardData&&clipboardData.items)){
return;
}
for(var i=0,length=clipboardData.items.length;i<length;i++){
var item=clipboardData.items[i];
if(item.kind==='file'&&isImage.test(item.type)){
img=item.getAsFile();
var url='/common/upload';
var formData=new FormData();
formData.append('file',img);
//上传图片
var xhr=new XMLHttpRequest();
//上传结束
xhr.onload=function () {
var data=JSON.parse(xhr.responseText);
//console.log(data)
if (data.code === 200) {
if (contentE.val().length === 0) {
contentE.insertAtCousor("![image](" + data.detail + ")\r\n");
} else {
contentE.insertAtCousor("\r\n![image](" + data.detail + ")");
}
var currentPosition = contentE.getSelectionEnd();
contentE.setSelection(currentPosition);
}
}
xhr.open('POST',url,true);
xhr.send(formData);
//当剪贴板里是图片时，禁止默认的粘贴
return false;
}
}
});
/*smc 2018.12.26 end*/
