如何將word圖片貼上到百度富文字編輯器裡面
自動匯入Word圖片，或者貼上Word內容時自動上傳所有的圖片，並且最終保留Word樣式，這應該是Web編輯器裡面最基本的一個需求功能了。一般情況下我們將Word內容貼上到Web編輯器（富文字編輯器）中時，編輯器都無法自動上傳圖片。需要使用者手動一張張上傳Word圖片。如果只有一張圖片還能夠接受，如果圖片數量比較多，這種操作就顯得非常的麻煩。
1、只貼上圖片並上傳到伺服器
config.extraPlugins = 'uploadimage';
//config.uploadUrl = '上傳路徑';
config.imageUploadUrl= '上傳路徑';
請求
檔案上傳的預設請求是一個檔案，作為具有“upload”欄位的表單資料。
響應：檔案已成功上傳
當檔案成功上傳時的JSON響應：
uploaded-設定為1。
fileName -上傳檔案的名稱。
url -上傳檔案的URL。
響應：檔案無法上傳
uploaded-設定為0。
error.message -要顯示給使用者的錯誤訊息。
usingSystem;
usingSystem.Web;
usingSystem.IO;
namespaceWordPasterCK4
{
publicpartialclassupload: System.Web.UI.Page
{
protectedvoidPage_Load(objectsender, EventArgs e)
{
stringfname = Request.Form["UserName"];
intlen = Request.ContentLength;
if(Request.Files.Count > 0)
{
DateTime timeNow = DateTime.Now;
stringuploadPath ="/upload/"+ timeNow.ToString("yyyyMM") +"/"+ timeNow.ToString("dd") +"/";
stringfolder = Server.MapPath(uploadPath);
//自動建立目錄
if(!Directory.Exists(folder)) Directory.CreateDirectory(folder);
HttpPostedFile file = Request.Files.Get(0);
//原始檔名稱，由控制元件自動生成。
//md5.png,crc.png,uuid.png,sha1.png
stringnameOri = file.FileName;
stringext = Path.GetExtension(nameOri).ToLower();
//只支援圖片上傳
if(ext ==".jpg"
||ext ==".jpeg"
||ext ==".png"
||ext ==".gif"
||ext ==".bmp")
{
stringfilePathSvr = Path.Combine(folder, nameOri);
//
if(!Directory.Exists(filePathSvr)) file.SaveAs(filePathSvr);
Response.Write("http://10.168.4.209:83"+ uploadPath + nameOri);
}
}
}
}
}
2、貼上word裡面的圖片路徑是fill://D 這種格式 我理解這種是非瀏覽器安全的 許多瀏覽器也不支援
目前專案是用了一種變通的方式：
先把word上傳到後臺 、poi解析、儲存圖片 、轉換html、替換圖片、放到富文字框裡顯示
（富文字顯示有個坑：沒找到直接給富文字賦值的方法 要先銷燬 記錄下
varWordPasterConfig = {
"EncodeType":"GB2312"
,"Company":"荊門澤優軟體有限公司"
,"Version":"1,5,131,51655"
,"License2":""
,"Debug":false//除錯模式
,"LogFile":"f:\\log.txt"//日誌檔案路徑
,"PasteWordType":""//貼上WORD的圖片格式。JPG/PNG/GIF/BMP，推薦使用JPG格式，防止出現大圖片。
,"PasteImageType":""//貼上檔案，剪帖板的圖片格式，為空表示本地圖片格式。JPG/PNG/GIF/BMP
,"PasteImgSrc":""//shape:優先使用源公式圖片，img:使用word自動生成的圖片
,"JpgQuality":"100"//JPG質量。0~100
,"QueueCount":"5"//同時上傳執行緒數
,"CryptoType":"crc"//名稱計算方式,md5,crc,sha1,uuid，其中uuid為隨機名稱
,"ThumbWidth":"0"//縮圖寬度。0表示不使用縮圖
,"ThumbHeight":"0"//縮圖高度。0表示不使用縮圖
,"FileFieldName":"file"//自定義檔名稱名稱
,"ImageMatch":""//伺服器返回資料匹配模式，正則表示式，提取括號中的地址
,"FormulaDraw":"gdi"//公式圖片繪製器，gdi,magick
,"AppPath":""
,"Cookie":""
,"Servers":[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//內部伺服器地址(不下載此地址中的圖片)
,"IcoError":"http://www.ncmem.com/products/word-imagepaster/ckeditor353/WordPaster/error.png"
,"IcoUploader":"http://www.ncmem.com/products/word-imagepaster/ckeditor353/WordPaster/upload.gif"
,"PostUrl":"http://www.ncmem.com/products/word-imagepaster/fckeditor2461/asp.net/upload.aspx"
//x86
,"ClsidParser":"2404399F-F06B-477F-B407-B8A5385D2C5E"
,"CabPath":"http://www.ncmem.com/download/WordPaster2/WordPaster.cab"
//x64
,"ClsidParser64":"7C3DBFA4-DDE6-438A-BEEA-74920D90764B"
,"CabPath64":"http://www.ncmem.com/download/WordPaster2/WordPaster64.cab"
//Firefox
,"XpiType":"application/npWordPaster2"
,"XpiPath":"http://www.ncmem.com/download/WordPaster2/WordPaster.xpi"
//Chrome
,"CrxName":"npWordPaster2"
,"CrxType":"application/npWordPaster2"
,"CrxPath":"http://www.ncmem.com/download/WordPaster2/WordPaster.crx"
//Edge
, edge: { protocol:"wordpaster", port: 9200, visible:false}
,"ExePath":"http://www.ncmem.com/download/WordPaster2/WordPaster.exe"
,"mac": {path:"http://www.ncmem.com/download/WordPaster2/WordPaster.exe"}
};
3、官方剛發表新版本說已經新增功能：
ckeditor編輯器批量上傳的效果
圖片已經上傳到伺服器端
圖片地址已經替換過來了
可以看得出來，效果和使用者體驗都非常好。使用者藉助於此功能編輯功能得到大幅度提升了。