最近公司做項目需要實作一個功能，在網頁富文本編輯器中實作粘貼Word圖文的功能。
我們在網站中使用的Web編輯器比較多，都是根據使用者需求來選擇的。目前還沒有固定哪一個編輯器
有時候用的是UEditor,有時候用的CKEditor,KindEditor,TinyMCE。
在網上查了很多資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中可以支援單張圖檔粘貼。但是我們的使用者需要處理的是Word中的圖檔和文字，一般情況下Word中的圖檔可能有十幾張。有時候有幾十張。特别是使用者發一些教程或者使用說明類的文檔時圖檔都是大幾十張的。
在網上找到說UEditor支援word粘貼，試了一下，隻支援一張圖檔的粘貼。多張圖檔粘貼還需要使用者自已手動選擇。也就是說如果使用者粘貼的Word中包含20張圖檔的話，那麼使用者就需要手動選擇20次，這種操作使用者是不可能接受的。
網上找了很久，大部分都有一些不成熟的問題，終于讓我找到了一個成熟的項目。
1.前台頁面引用代碼
<%@page language="java" import="java.util.*" pageEncoding="utf-8"%><%@
page contentType="text/html;charset=utf-8"%><%@
page import="org.apache.commons.lang.StringUtils" %><%
/*
更新記錄：
2013-01-25 取消對SmartUpload的使用，改用commons-fileupload元件。因為測試發現SmartUpload有記憶體洩露的問題。
*/
//String path = request.getContextPath();
//String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String clientCookie = request.getHeader("Cookie");
%>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>編輯器完整版執行個體-1.2.6.0</title>
<scripttype="text/javascript" src="ueditor.config.js" charset="utf-8"></script>
<scripttype="text/javascript" src="ueditor.all.min.js" charset="utf-8"></script>
<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/WordPaster.js" charset="utf-8"></script>
<scripttype="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
</head>
<body>
<textareaname="背景取值的key"id="myEditor">這裡寫你的初始化内容</textarea>
<scripttype="text/javascript">
var pasterMgr = new WordPasterManager();
pasterMgr.Config["PostUrl"] = "http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"
pasterMgr.Config["Cookie"] = '<%=clientCookie%>';
pasterMgr.Load();//加載控件
var ue = UE.getEditor('myEditor');
ue.ready(function() {
//設定編輯器的内容
ue.setContent('hello');
//擷取html内容，傳回: <p>hello</p>
var html = ue.getContent();
//擷取純文字内容，傳回: hello
var txt = ue.getContentTxt();
pasterMgr.SetEditor(ue);
});
</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.接收上傳的圖檔并儲存在服務端
<%@page language="java" import="java.util.*" pageEncoding="utf-8"%><%@
page contentType="text/html;charset=utf-8"%><%@
page import = "Xproer.*" %><%@
page import="org.apache.commons.lang.StringUtils" %><%@
page import="org.apache.commons.fileupload.*" %><%@
page import="org.apache.commons.fileupload.disk.*" %><%@
page import="org.apache.commons.fileupload.servlet.*" %><%
/*
更新記錄：
2013-01-25 取消對SmartUpload的使用，改用commons-fileupload元件。因為測試發現SmartUpload有記憶體洩露的問題。
*/
//String path = request.getContextPath();
//String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String uname = "";// = request.getParameter("uid");
String upass = "";// = request.getParameter("fid");
// Check that we have a file upload request
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
//upload.setSizeMax(262144);//256KB
List files = null;
try
{
files = upload.parseRequest(request);
}
catch (FileUploadException e)
{// 處理檔案尺寸過大異常
out.println("上傳檔案異常："+e.toString());
return;
}
FileItem imgFile = null;
// 得到所有上傳的檔案
Iterator fileItr = files.iterator();
// 循環處理所有檔案
while (fileItr.hasNext())
{
// 得到目前檔案
imgFile = (FileItem) fileItr.next();
// 忽略簡單form字段而不是上傳域的檔案域(<input type="text" />等)
if(imgFile.isFormField())
{
String fn = imgFile.getFieldName();
String fv = imgFile.getString();
if(fn.equals("uname")) uname = fv;
if(fn.equals("upass")) upass = fv;
}
else
{
break;
}
}
Uploader up = new Uploader(pageContext,request);
up.SaveFile(imgFile);
String url = up.GetFilePathRel();
out.write(url);
response.setHeader("Content-Length",url.length()+"");//傳回Content-length标記，以便控件正确讀取傳回位址。
%> 接下來看一下具體操作吧
對于文檔的上傳我們需要知道這個項目的邏輯是否符合我們的構造。
運作：
嘗試使用文檔複制後粘貼進來：
通過粘貼後，文檔以及圖檔被粘貼進來了，看看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
exe：http://t.cn/AiCXvoVl
示例下載下傳：
FCKEditor2x：http://sina.lt/gcYu
CKEditor3x：http://sina.lt/gcY5
CKEditor4x：http://sina.lt/gaWw
CuteEditor6x：http://sina.lt/gcYD
KindEditor3x：http://sina.lt/gcYG
KindEditor4x：http://sina.lt/gcYN
TinyMCE3x：http://sina.lt/gcYS
TinyMCE4x：http://sina.lt/gcYU
UEditor1x：http://sina.lt/gcYW
xhEditor1x：http://sina.lt/gcYX