如何實現讓編輯支援word內容和截圖的複製黏貼

螞蟻小編發表於2017-04-11

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

讓編輯器支援word的複製黏貼：

其中圖片會轉化為base64編碼， 如果是通過遠端開啟這個靜態頁， 黏貼word文件的時候， 圖片不會黏貼進來， 因為遠端地址無法訪問本地磁碟的絕對路徑， 如果把下面程式碼儲存成靜態介面開啟， 那麼word中的圖片都可以看見， 而且都會被轉化為base64編碼。

編輯器支援截圖的黏貼：

讓編輯器支援圖片直接拖拽， 直接拖拽即可新增圖片， 功能更加強大， 而且圖片也是base64編碼。使用的話這new Edit()， 引數為一個可編輯的元素， 比如有contenteditable屬性的div或者iframe元素等:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</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通過canvas中專為base64字串;
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    //從word拷貝時候會得到text/html資料;
    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;
      };
    });
 
    //如果通過截圖或者複製圖片的方式會得到  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);;
        });
        //阻止預設事件, 避免重複新增;
        ev.originalEvent.preventDefault();
      };
    };
  };
 
  //繫結拖拽事件
  //要給個響應
  editEl.bind("dragover", function () {
    return false;
  });
 
  //觸發事件的響應
  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) {
    // 過濾掉 非 image 型別的檔案
    if (!src.type.match(/image.*/)) {
      if (window.console) {
        console.log("選擇的檔案型別不是圖片: ", src.type);
      }
      else {
        window.confirm("只能選擇圖片檔案");
      }
      return;
    }
 
    // 建立 FileReader 物件 並呼叫 render 函式來完成渲染.
    var reader = new FileReader();
    // 繫結load事件自動回撥函式
    reader.onload = function (e) {
      // 呼叫前面的 render 函式
      callback(e.target.result);
    };
    // 讀取檔案內容
    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>

很多網上的編輯器裡 對圖片的支援單一， 都會考慮IE6， IE7，  ff， chrome， 各種相容問題。

這個解決方案適合基於chrome核心的瀏覽器, FF的相容沒有處理， 因為所有的圖片資料都是基於base64， 圖片就沒有上傳這一說法了，圖片都變成了字串， 不過這個有個劣勢就是每一次提交的資料都會比較大。

相關文章