Ckeditor IE下粘貼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 - 要顯示給用戶的錯誤消息。
using System;
using System.Web;
using System.IO;
namespace WordPasterCK4
{
publicpartialclassupload : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
string fname = Request.Form["UserName"];
int len = Request.ContentLength;
if (Request.Files.Count > 0)
{
DateTime timeNow = DateTime.Now;
string uploadPath = "/upload/" + timeNow.ToString("yyyyMM") + "/" + timeNow.ToString("dd") + "/";
string folder = Server.MapPath(uploadPath);
//自動創建目錄
if (!Directory.Exists(folder)) Directory.CreateDirectory(folder);
HttpPostedFile file = Request.Files.Get(0);
//原始文件名稱，由控件自動生成。
//md5.png,crc.png,uuid.png,sha1.png
string nameOri = file.FileName;
string ext = Path.GetExtension(nameOri).ToLower();
//只支持圖片上傳
if ( ext == ".jpg"
|| ext == ".jpeg"
|| ext == ".png"
|| ext == ".gif"
|| ext == ".bmp")
{
string filePathSvr = 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、替換圖片、放到富文本框裏顯示
（富文本顯示有個坑：沒找到直接給富文本賦值的方法 要先銷燬 記錄下
var WordPasterConfig = {
"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編輯器批量上傳的效果
圖片已經上傳到服務器端
圖片地址已經替換過來了
可以看得出來，效果和用戶體驗都非常好。用戶藉助於此功能編輯功能得到大幅度提升了。
詳細配置信息可以參考這篇文章：http://blog.ncmem.com/wordpress/2019/10/18/ckeditor-ie%e4%b8%8b%e7%b2%98%e8%b4%b4word%e4%b8%ad%e5%9b%be%e7%89%87%e9%97%ae%e9%a2%98/