如何實現讓編輯支援word內容和截圖的複製黏貼
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, 圖片就沒有上傳這一說法了,圖片都變成了字串, 不過這個有個劣勢就是每一次提交的資料都會比較大。
相關文章
- js複製黏貼功能JS
- 教你JavaScript實現一鍵複製內容剪貼簿JavaScript
- 禁止文字框滑鼠右鍵黏貼內容
- idea無法黏貼_IntelliJ Idea 複製貼上的問題(轉載)IdeaIntelliJ
- JavaScript實現複製和貼上功能JavaScript
- js 實現點選複製內容JS
- wordpress從word複製貼上公式公式
- 如何在 Laravel 專案中輕鬆實現拖拽和剪下板黏貼上傳圖片?Laravel
- win10 office word不能複製貼上怎麼辦_win10 office word不能複製貼上如何處理Win10
- 短視訊系統原始碼,動態內容實現長按複製貼上原始碼
- 如何編輯PDF檔案的內容?
- vue 中實現複製貼上Vue
- Laravel 可以支援 Markdown,又支援貼上圖片的 編輯器 哪個好Laravel
- JAVA編輯word替換指定內容,解決插入圖片顯示不全問題Java
- 雜湊表:如何實現word編輯器的拼寫檢查?
- UEditor編輯文章時貼上內容的時候導致原來的圖片不能顯示
- 在vSphere中實現複製貼上功能
- PDF編輯器怎麼用?如何編輯PDF檔案內容
- 9行程式碼實現複製內容至剪下板行程
- 實用、易用的截圖與貼圖工具:SnipasteAST
- C#將Excel檔案中選擇的內容,複製貼上到 winform datagridviewC#ExcelORMView
- 本地圖文直接複製到HTML編輯器中地圖HTML
- Python網頁截圖/螢幕截圖/截長圖如何實現?Python網頁
- Draw.ioMac/Win:支援線上編輯和匯出的流程圖繪製神器Mac流程圖
- Laravel editor.md 支援截圖 / 貼上上傳圖片Laravel
- 線上編輯Word——插入圖片、圖形
- js點選複製內容JS
- windows10截圖後怎麼編輯圖片文字_win10在截圖上編輯文字的方法WindowsWin10
- 網頁內容複製貼上(三種方案 相容多種瀏覽器)網頁瀏覽器
- Selenium IDE 如何實現截圖IDE
- 如何讓Sublime Text編輯器支援新的ABAP關鍵字
- Python中Wxpython實現剪下、複製、貼上和檔案開啟功能Python
- Mac圖片拼貼編輯器:PosterinoMac
- Typescript實現一鍵複製文字進剪貼簿TypeScript
- 本地圖文直接複製到線上編輯器中地圖
- 有贊上那個微頁面編輯完後,訪問的時候呈現編輯的內容,咋實現的呢?
- 現代富文字編輯器Quill的內容渲染機制UI
- Vue中配合clipboard.js實現點選按鈕複製內容VueJS
- Viso的物件圖形複製到word,發現圖形畫布底部有大量空白,如何解決物件