文本插件TINYMCE使用CTRL+V粘貼圖片上傳到遠程服務器

最近項目中有一個需求，需要在編輯器增加Word內容一鍵粘貼的功能，粘貼后能夠自動將Word中的圖片上傳到服務器中，并且保留Word文檔中的文本樣式，比如顏色，字體，字體大小，表格等。粘貼操作要求支持快捷鍵操作（Ctrl + V），Web編輯器使用的TinyMCE5

用戶每天需要發布新聞，新聞都是由編輯寫好，保存在Word文檔中，之前發的時候圖片處理比較麻煩，都是一張張上傳，效率比較低，現在希望能夠批量自動上傳，提高工作效率。

希望在現有的后臺管理系統中直接集成到現有的編輯器（tinymce）中，做成一個按鈕，用戶點擊按鈕后就能粘貼，圖片自動上傳。操作盡量簡單，用戶體驗盡量的好用。

?

網上搜了一下，基本上大部分文章講的都是用VUE+HTML5來實現的。我們實際測試后發現這種方案局限性比較大，而且兼容性也不夠好，在有些電腦上不行，有些客戶電腦又行，暫時找不到原因，開源方案也沒人聯系，沒有任何技術支持，所以放棄。圖片是轉成了BASE64上傳，與原始圖片相比尺寸更大些，應該是自動轉換時出了問題，清晰度也有下降。

?

找了幾個星期最終只找到了一個最符合需求的插件：澤優Word一鍵粘貼控件（WordPaster），實際測試后發現效果還不錯基本能夠滿足需求。提供了完整的示例代碼，整合教程和視頻教程，集成起來也非常的方便，用戶體驗做的也很好。

?

項目組建議最好能夠以插件方式進行使用，這樣集成升級后期維護更方便，前端沒有使用VUE框架，而是HTML+JS。用戶希望直接集成到編輯器（UEditor）中，在工具欄中提供一個按鈕，點擊按鈕后就能粘貼，圖片自動上傳。這樣的用戶體驗是最好的

?

另外一點就是希望穩定可靠，因為用的人比較多，幾乎每天都會使用，使用頻繁也很高，出了問題就比較影響工作效率。客戶那邊要求提供手機和微信需要技術支持。

?

上面的幾點能夠滿足的話基本就沒有什么問題，領導希望最好提供OEM或者買斷的采購方式，因為我們是軟件公司，也是專門做政府單位項目，客戶比較多，領導希望能夠買斷集成在我們自己的產品中，這樣就能夠為所有用戶提供這個功能，用戶體驗也能夠統一。主要是領導不想每次都要單獨采購，太麻煩了。

?

示例下載：

碼：https://gitee.com/xproer/up6-vue-cli

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.定義事件

HTML5實現分片上傳GB級大文件組件，用HTML實現分片上傳GB級大文件組件，用javascript實現分片上傳GB級大文件組件，用js實現分片上傳GB級大文件組件，用vue2實現分片上傳GB級大文件組件，用vue3實現分片上傳GB級大文件組件，用HTML5實現分片上傳1GB級大文件組件，用HTML5實現分片上傳5GB級大文件組件，用HTML5實現分片上傳10GB級大文件組件，用HTML5實現分片上傳50GB級大文件組件，用HTML5實現分片上傳100GB級大文件組件，用HTML5實現分塊上傳GB級大文件組件，用HTML5實現分段上傳GB級大文件組件，用HTML5實現分割上傳GB級大文件組件，用HTML5實現切割上傳GB級大文件組件，用HTML5實現分片上傳GB級大文件控件，用HTML5實現分片上傳GB級大文件技術，用HTML5實現分片上傳GB級大文件方案，用HTML5實現分片上傳GB級大文件教程，

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數據庫