js 实现markdown中直接粘贴图片

思路解析：监听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*/