近對(duì)于網(wǎng)頁(yè)沖浪有點(diǎn)不爽，對(duì)常看的網(wǎng)站平常的白底沒(méi)了興趣，想要搞點(diǎn)花里胡哨的第一時(shí)間就想到了通過(guò)插件注入css的形式來(lái)改善界面。

很快啊，想要在一個(gè)優(yōu)雅的背景，邏輯上時(shí)非常簡(jiǎn)單的，使用注入CSS樣式background-image就可以了。

但是我又發(fā)現(xiàn)一個(gè)問(wèn)題，好多好看的壁紙我保存下了，找不到當(dāng)初原來(lái)的網(wǎng)頁(yè)了，怎么添加本地路徑都不行，真離譜啊，怎么樣才能使用本地文件呢？

沖浪沖了好久，給我發(fā)現(xiàn)兩個(gè)辦法。

1. 使用base64這個(gè)辦法感覺(jué)怪麻煩的不搞了。

2. Chrome插件給我們?cè)O(shè)定了可以操作插件本地文件的權(quán)限。

manifest.json配置文件添加權(quán)限

這個(gè)方式只能適合瀏覽器擴(kuò)展應(yīng)用，不止是圖片，CSS還有JavaScript和HTML頭可以通過(guò)添加權(quán)限列出資源，以方便插件去訪問(wèn)。

css文件配置

其中后面是圖片地址，而前面的是插件id，插件ID一般是不會(huì)變的，可以通過(guò)擴(kuò)展管理界面去查看。

KEDITOR復(fù)制粘貼word圖片，CKEDITOR復(fù)制word圖片，CKEDITOR粘貼上傳Word圖片，CKEDITOR粘貼上傳圖片，JAVA中將WORD轉(zhuǎn)換為HTML導(dǎo)入到CKEDITOR編輯器中（解決圖片問(wèn)題，樣式，非常完美），ckeditor粘貼word,ckeditor3粘貼word,ckeditor4粘貼word,ckeditor5粘貼word內(nèi)容，ckeditor復(fù)制word圖片，ckeditor復(fù)制粘貼word圖片，ckeditor復(fù)制word內(nèi)容，ckeditor粘貼word圖片，復(fù)制word圖片粘貼到ckeditor，

前端用了VUE2,VUE3，React，HTML5，也是一個(gè)新項(xiàng)目，為了方便用的這些框架，實(shí)際上這個(gè)是無(wú)所謂，功能的實(shí)現(xiàn)和前端這些框架沒(méi)什么關(guān)系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能實(shí)現(xiàn)和后端用的什么開(kāi)發(fā)語(yǔ)言無(wú)關(guān)，后端只提供一個(gè)文件上傳的接口，HTTP form協(xié)議，圖片上傳時(shí)會(huì)調(diào)這個(gè)接口。

編輯器是ckeditor5，為ckeditor編輯器增加粘貼Word圖片的功能，支持快捷鍵操作（Ctrl+V），支持多種系統(tǒng)：Windows,macOS,Linux,信創(chuàng)國(guó)產(chǎn)化環(huán)境，中標(biāo)麒麟，銀河麒麟，統(tǒng)信，龍芯。

支持word粘貼，word內(nèi)容粘貼,word圖文粘貼,word圖片粘貼，粘貼后圖片能夠自動(dòng)上傳到服務(wù)器中，然后將圖片和內(nèi)容HTML添加到編輯器中，上傳接口地址能夠自定義

用戶使用操作起來(lái)更方便一些，一般發(fā)新聞，或者發(fā)文章用的比較多，基本上每天發(fā)新聞，發(fā)文章都會(huì)用到，

這個(gè)功能確實(shí)為用戶帶來(lái)了方便。

在官網(wǎng)下載示例：
http://www.ncmem.com/webapp/wordpaster/versions.aspx

asp.net-gitee示例：https://gitee.com/xproer/wordpaster-asp.net-ckeditor4x

說(shuō)明：此教程以CKEditor4.x為例，使用其他編輯器的查看對(duì)應(yīng)教程。
將下列文件夾復(fù)制到項(xiàng)目中
/WordPaster

/ckeditor/plugins/imagepaster
/ckeditor/plugins/netpaster
/ckeditor/plugins/pptpaster
/ckeditor/plugins/pdfimport

1.上傳WordPaster文件夾

2.上傳插件文件夾

將imagepaster,netpaster文件夾上傳到現(xiàn)有項(xiàng)目ckeditor/plugins目錄中

3.在工具欄中增加插件按鈕

5.引用js

初始化控件，并配置上傳接口

注意：

1.如果接口字段名稱(chēng)不是file，請(qǐng)配置FileFieldName。ueditor接口中使用的upfile字段

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

2.如果接口返回JSON，請(qǐng)配置ImageMatch

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

3.如果接口返回的圖片地址沒(méi)有域名，請(qǐng)配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權(quán)限驗(yàn)證（登陸驗(yàn)證，SESSION驗(yàn)證），請(qǐng)配置COOKIE。或取消權(quán)限驗(yàn)證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

整合成功的效果：

說(shuō)明：
1.請(qǐng)先測(cè)試您的接口：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

常見(jiàn)問(wèn)題：

1.為什么整合到項(xiàng)目中圖片無(wú)法上傳？

可能原因：可能上傳頁(yè)面有登陸驗(yàn)證，上傳時(shí)沒(méi)有添加SESSION信息，導(dǎo)致上傳失敗。可在上傳頁(yè)面增加SESSION參數(shù)。