公司做的項目需要用到粘貼Word功能。就是將word內容一鍵粘貼到網頁編輯器（在線富文本編輯器）中。Chrome+IE默認支持粘貼剪切板中的圖片，但是我要粘貼的文章存在word里面，圖片多達數十張，我總不能一張一張復制吧 ？
我希望打開文檔doc直接復制粘貼到富文本編輯器，直接發布
網上找了很久，大部分都有一些不成熟的問題，皇天不負有心人終於讓我找到了一個成熟的項目。
1、前台頁面引用代碼
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="CKEditor353.index" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WordPaster For CKEditor-3.x</title>
<linktype="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>
<linktype="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>
<scripttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.edge.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.app.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/w.file.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>
<scripttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>
<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textareaid="editor1"name="editor1"><imgsrc="http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png"width="134"height="44"/></textarea>
<scripttype="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:2797/asp.net/upload.aspx";//這里填網站的上傳路徑
pasterMgr.Config["Cookie"] = 'ASP.NET_SessionId=<%=Session.SessionID%>';
pasterMgr.Load(); //加載控件
CKEDITOR.on('instanceReady', function (evt)
{
pasterMgr.SetEditor(evt.editor);
});
//自定義快捷鍵
CKEDITOR.config.keystrokes = [
[CKEDITOR.CTRL + 86/*V*/, 'imagepaster']
];
//加載CKEditor編輯器
CKEDITOR.replace('editor1');
</script>
</body>
</html>
請求
文件上傳的默認請求是一個文件，作為具有“upload”字段的表單數據。
響應：文件已成功上傳
當文件成功上傳時的JSON響應：
uploaded- 設置為1。
fileName - 上傳文件的名稱。
url - 上傳文件的URL。
響應：文件無法上傳
uploaded- 設置為0。
error.message - 要顯示給用戶的錯誤消息。
2、粘貼word里面的圖片路徑是fill://D 這種格式 我理解這種是非瀏覽器安全的 許多瀏覽器也不支持
目前項目是用了一種變通的方式：
先把word上傳到后台 、poi解析、存儲圖片 、轉換html、替換圖片、放到富文本框里顯示
（富文本顯示有個坑：沒找到直接給富文本賦值的方法 要先銷毀 記錄下
success : function(data) {
$('#content').attr('value',data.imagePath);
var editor = CKEDITOR.instances["content"]; //你的編輯器的"name"屬性的值
if (editor) {
editor.destroy(true);//銷毀編輯器
}
CKEDITOR.replace('content'); //替換編輯器，editorID為ckeditor的"id"屬性的值
$("#content").val(result); //對editor賦值
//CKEDITOR.instances.contentCkeditor.setData($("#content").text());
}
3.接收上傳的圖片並保存在服務端
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Text;
namespace WordImages.asp.net
{
publicpartialclassupload : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
string fname = Request.Form["UserName"];
int len = Request.ContentLength;
System.Diagnostics.Debug.Write(Session["ck"]);
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);
string ext = Path.GetExtension(file.FileName).ToLower();
//只支持圖片上傳
if (ext == ".jpg"
|| ext == ".jpeg"
|| ext == ".png"
|| ext == ".gif"
|| ext == ".bmp"
|| ext == ".webp")
{
string filePath = Path.Combine(folder, file.FileName);
//
if(!Directory.Exists(filePath)) file.SaveAs(filePath);
Response.Write(uploadPath + file.FileName);
}
}
}
}
}
HTTP協議
請求頭數據：
請求表單數據：
前端效果：
接下來就看一下具體操作吧
1、打開工程：
對於文檔的上傳我們需要知道這個項目的邏輯是否符合我們的構造。
運行：
嘗試使用文檔復制后粘貼進來：
圖片上傳進度
通過粘貼后，文檔以及圖片被粘貼進來了，看看html代碼是否如我們的預期：
看來這個工程完全符合我們的預期，圖片全部使用img標簽統一。傳輸進度條的效果超出了我的意料。
來看看我們的文檔圖片被放置在哪了：
地址：D:\wamp64\www\WordPasterCKEditor4x\php\upload\201904\16
圖片被統一放置在文件夾。
由此看來這個項目的實際效果大大超出了我的意料了，帶入工程后完美的優化了工程項目
工程目錄截圖：
詳細配置信息可以參考這篇文章：