關於複製 word 圖文到富文本中的問題

原由

事情的通過是這樣的：👉咱們有一個考試系統，裏面有個錄題的功能（就是在富文本中編輯），不少狀況下，咱們還會有一份現成的 word 文檔（就是一些題目），這樣一來咱們就能夠從 word 中複製題目到富文本中，題目就算錄入完成了。可是問題來了，若是我是圖文一塊兒複製的（圖文分開是能夠的），圖片是顯示不出來的，就像下面這樣子👇：

因此，能不能讓圖片也顯示出來呢？不知道，也搜不到，只能隨便試試了。對了，文中的示例用的是 vue-quill-editor 富文本編輯器，不過其實這個問題到頭來和 quill 自己沒有什麼關係😂。

陷入沉思

首先明確下問題的初衷：⭕就是讓富文本可以顯示從 word 複製過來的圖文信息中的圖片，該圖片要麼是前端轉成 base64 格式，要麼是傳給後端返回一個 src 來展現，這裏以 base64 舉例。

想法一

最初的想法就是各類搜索羅🤔，而後就。。。未果而終。那。。。就只能本身動手豐衣足食了。 常規的第一個想法是看看編輯器自己有沒有暴露什麼接口，讓你能夠本身處理一下複製的內容，找了一下，是有的，心理竊喜😁，以下面幾張圖所示：

因而乎咱們順利成章的把 node 和 delta 的內容打印出來，以下圖所示👇：

若是你不瞭解 delta 也不要緊（能夠描述富文本的一種數據格式），你只要知道里面有個 image 字段，到時輸出到富文本大概會長這個樣子： <img src="insert 裏面的 image" width="attributes 裏面的 width" height="attributes 裏面的 height">。但很遺憾的是這個 image 字段派不上用場，由於瀏覽器出於安全緣由考慮😒，咱們僅僅根據 file://xxx 這個路徑是訪問不到本地資源的，因此咱們是讀不到該圖片的，也就是咱們最開始控制檯報錯的樣子：

不過這裏我仍是先隨便複製了一個 base64 格式的圖片替換這個 image 字段，圖片是能正常顯示的。那麼接下來咱們的目的就是想辦法讀取到圖文中的圖片。

想法二

因而乎，我又去 quill 找了找，看看有沒有更早的暴露一些接口，可以讓咱們更早的處理複製的內容，由於上面那個接口顯然已是處理事後的內容，咱們須要再快一步🚀。找啊找，找啊找，找到一個好朋友。又很遺憾啊，我並無找到，腦子逐漸空白😯。。。

閉目養神了一會以後，實在是不知道咋下手，而後就去稍微瞟了瞟 quill 源碼，看看裏面作了啥子👀：

經過上面兩個圖咱們能夠明顯的看到，咱們要找的圖片文件應該就在 e.clipboardData.files 裏面，可是咱們命🀄的邏輯應該是這個 this.onPaste(range, { html, text })，顯然這個方法並無傳入 files，應該也就沒有對其作相應的處理。看起來咱們彷佛還要改改別人的代碼才行，不過改別人的代碼仍是有門檻的，並且久了很差維護，因此咱們先從小的着手，本身先添加個 paste 事件，看下原始的 paste 事件是否可以獲取到圖片文件並轉成 base64，若是能夠的話再繼續深刻😎。

想法三

因而乎，咱們在富文本中添加了本身的 paste 事件，並將結果打印出來，以下圖所示：

咱們如願以償的拿到了 base64 格式的圖片，而後複製這段 base64 在瀏覽器中打開

😬感動 ing，圖片顯示出來了，因而乎直接改了下 quill 的包代碼（這個 quill 和剛纔上面展現的不是一個版本），就像下面這樣：

而後咱們嘗試粘貼，結果以下：

臥槽，🐂🍺，竟然能夠，Amazing! 可是好像有哪裏不對勁，仔細一看，那個圖片竟然本身把文字也加上去了，這是什麼騷操做，剛纔瀏覽器預覽不是還能夠的嗎😐？思來想去🤔。。。。。。不賣關子了，其實剛纔就不行了，讓咱們把時間往前撥一點，回到圖片預覽的地方，這回我把背景變成白色了，你就會發現：

這尼瑪🙌，一開始就不對（因此和 quill 也就沒啥關係了），害我寫了半天。萬馬奔騰以後，仍是得靜靜，想一想爲啥文字會混入圖片呢？這個真不懂，搜了也沒有（多是由於剪貼板的實現機制吧），而後事情就告一段落了（原諒我這麼草率😅），由於源頭錯了，就沒有必要往下進行了。

未果而終

雖然結束的有點忽然，可是回過頭想一想，若是圖片是對的，這個功能實現起來好像不難，你能實現的話，框架也許就幫你實現了，框架沒有處理這種圖文邏輯可能就說明這地方有坑，須要警戒。

另外，若是你看的再仔細點，你就會發現咱們讀取的圖片是 png 格式的，而本地資源 file://xxx/clip_image002.gif 確是 gif 的，這就很奇怪了，不過從文件的命名 clip_image002.gif 來看，應該大概可能也許是剪貼板對其作了某種處理吧😂，至於作了啥，就不得而知了。這裏順便打開了這個 file 路徑的文件夾，裏面的內容以下圖所示：

神奇😳，這裏的圖片有兩種格式，並且都能正確顯示，惋惜咱們不能僅憑這個路徑去讀取圖片，因此仍是木有結果。這裏又順便把 word 另存爲成 .htm 文件，打開導出的 html 發現其中的圖片也是 gif 格式的，就像下圖這樣：

不明覺厲😳。。。

最後的最後，我還特地去試了下其餘產品的編輯器，看看效果怎麼樣，還好也不行：

不過意外的發現掘金自身的 markdown 竟然能夠粘貼圖文，就像下面這樣子：

恰好和我說的 base64 互補，不過還好結果是同樣的，圖片同樣會包含着文字，這樣我就放心了，哈哈哈哈😁😁😁。。。。

😏 據說還能把 word 傳給後端解析，再給回前端展現，不過好像有點得不償失。

🌺若是有大佬知道奇淫巧技的話，歡迎在下面留言。。。