快捷導(dǎo)航

讓編輯器支持word復(fù)制黏貼、截屏的js代碼

更新時(shí)間：2016年10月17日 14:20:31 作者：方方和圓圓

這篇文章主要為大家詳細(xì)介紹了讓編輯器支持word復(fù)制黏貼、截屏的js代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

chrome有很多人性化的API，比如拖拽，比如圖片可以轉(zhuǎn)化為base64等；

　　比如知乎上面的回復(fù)中可以直接黏貼圖片，就不需要手動(dòng)點(diǎn)擊圖片上傳按鈕，選擇圖片，確認(rèn)上傳等等；知乎參考地址：打開(kāi)

　　讓編輯器支持word的復(fù)制黏貼，其中圖片會(huì)轉(zhuǎn)化為base64編碼，如果是通過(guò)遠(yuǎn)程打開(kāi)這個(gè)靜態(tài)頁(yè)，黏貼word文檔的時(shí)候，圖片不會(huì)黏貼進(jìn)來(lái)，因?yàn)檫h(yuǎn)程地址無(wú)法訪問(wèn)本地磁盤(pán)的絕對(duì)路徑，如果把下面代碼保存成靜態(tài)界面打開(kāi)，那么word中的圖片都可以看見(jiàn)，而且都會(huì)被轉(zhuǎn)化為base64編碼；

　　編輯器支持截屏的黏貼；

　　讓編輯器支持圖片直接拖拽，直接拖拽即可添加圖片，功能更加強(qiáng)大，而且圖片也是base64編碼；

　　使用的話這new Edit()，參數(shù)為一個(gè)可編輯的元素，比如有contenteditable屬性的div或者iframe元素等:

<html>
 <head></head>
 <body>
 <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

  <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">

  </div>

 <script>
  function Edit( editEl ) {
   editEl = $(editEl);

   $(editEl).bind("paste", clipFn);

   function clipFn(ev) {

    //把剪貼板中的img通過(guò)canvas中專(zhuān)為base64字符串;
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    //從word拷貝時(shí)候會(huì)得到text/html數(shù)據(jù);
    var html = $(ev.originalEvent.clipboardData.getData("text/html"));
    html.find("img").each(function () {

     var img = document.createElement("img");
     var src = $(this).attr("src"); //.replace(/\\/gi,"\/");
     var _this = this;
     img.src = src;

     img.onload = function () {
      canvas.width = img.width;
      canvas.height = img.height;
      context.drawImage(img, 0, 0, img.width, img.height);
      var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
      $("img").each(function (index, el) {
       //匹配圖片;
       if ($(this).attr("src").replace(/[\/\\]/g,"") === src.replace(/[\/\\]/g,"")) {
        el.src = dataBase64;
       };
      });

      img.onerror = function() {
       console.log("圖片加載失敗");
      };

      img.onload = null;
     };

    });

    //如果通過(guò)截圖或者復(fù)制圖片的方式會(huì)得到 type為"imgage"的圖片;
    var ele = ev.originalEvent.clipboardData.items;
    for (var i = 0; i < ele.length; ++i) {
     if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {

      var blob = ele[i].getAsFile();
      readBlobAsDataURL(blob, function( base64 ) {

       var img= document.createElement('img');
       img.setAttribute('src', base64);

       editEl.append(img);;
      });
      //阻止默認(rèn)事件, 避免重復(fù)添加;
      ev.originalEvent.preventDefault();
     };
    };
   };

   //綁定拖拽事件
   //要給個(gè)響應(yīng)
   editEl.bind("dragover", function() {
    return false;
   });

   //觸發(fā)事件的響應(yīng)
   editEl.bind("drop", function(ev) {
    loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {
     editEl.append( "<img src="+result+" />" );
    });
    return false;
   });

   // 加載 圖像文件(url路徑)
   function loadImage(src, callback){
    // 過(guò)濾掉 非 image 類(lèi)型的文件
    if(!src.type.match(/image.*/)){
     if(window.console){
      console.log("選擇的文件類(lèi)型不是圖片: ", src.type);
     } else {
      window.confirm("只能選擇圖片文件");
     }
     return;
    }

    // 創(chuàng)建 FileReader 對(duì)象 并調(diào)用 render 函數(shù)來(lái)完成渲染.
    var reader = new FileReader();
    // 綁定load事件自動(dòng)回調(diào)函數(shù)
    reader.onload = function(e){
     // 調(diào)用前面的 render 函數(shù)
     callback(e.target.result);
    };
    // 讀取文件內(nèi)容
    reader.readAsDataURL(src);
   };

   function readBlobAsDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);};
    a.readAsDataURL(blob);
   };
  };
 </script>
 
 <script>
  new Edit("#edit");
 </script>
 </body>
</html>

很多網(wǎng)上的編輯器里對(duì)圖片的支持單一，都會(huì)考慮IE6， IE7， ff， chrome，各種兼容問(wèn)題；

這個(gè)解決方案適合基于chrome內(nèi)核的瀏覽器, FF的兼容沒(méi)有處理，因?yàn)樗械膱D片數(shù)據(jù)都是基于base64，圖片就沒(méi)有上傳這一說(shuō)法了，圖片都變成了字符串，不過(guò)這個(gè)有個(gè)劣勢(shì)就是每一次提交的數(shù)據(jù)都會(huì)比較大；

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: