asp.net+UEditor粘貼word
最近公司作項目須要實現一個功能，在網頁富文本編輯器中實現粘貼Word圖文的功能。javascript
咱們在網站中使用的Web編輯器比較多，都是根據用戶需求來選擇的。目前尚未固定哪個編輯器php
有時候用的是UEditor,有時候用的CKEditor,KindEditor,TinyMCE。css
在網上查了不少資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中能夠支持單張圖片粘貼。可是咱們的用戶須要處理的是Word中的圖片和文字，通常狀況下Word中的圖片可能有十幾張。有時候有幾十張。特別是用戶發一些教程或者使用說明類的文檔時圖片都是大幾十張的。 html
在網上找到說UEditor支持word粘貼，試了一下，只支持一張圖片的粘貼。多張圖片粘貼還須要用戶自已手動選擇。也就是說若是用戶粘貼的Word中包含20張圖片的話，那麼用戶就須要手動選擇20次，這種操做用戶是不可能接受的。前端
網上找了好久，大部分都有一些不成熟的問題，皇天不負有心人終於讓我找到了一個成熟的項目。java
1、前臺頁面引用代碼jquery
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx.cs"Inherits="CKEditor353.index" %>web
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">json
<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
圖片被統一放置在文件夾。
由此看來這個項目的實際效果大大超出了個人意料了，帶入工程後完美的優化了工程項目
工程目錄截圖：
控件包：
IE(x86)：http://t.cn/AiC6segS
IE(x64)：http://t.cn/AiCXv7ti
Chrome：http://t.cn/AiC6s86u
Firefox：http://t.cn/AiCXvMr5
示例下載：
FCKEditor2x：http://t.cn/AiCaglBC
CKEditor3x：http://t.cn/AiCagROE
CKEditor4x：http://t.cn/AiCagum4
CuteEditor6x：http://t.cn/AiCasJmE
KindEditor3x：http://t.cn/AiCasa2h
KindEditor4x：http://t.cn/AiCasoFp
TinyMCE3x：http://t.cn/AiCasN26
TinyMCE4x：http://t.cn/AiCasOiM
UEditor1x：http://t.cn/AiCasl3t
xhEditor1x：http://t.cn/AiCasTa1
eWebEditor：http://t.cn/AiCas8aK