jsp+UEditor粘貼word
最近公司作項目須要實現一個功能，在網頁富文本編輯器中實現粘貼Word圖文的功能。javascript
咱們在網站中使用的Web編輯器比較多，都是根據用戶需求來選擇的。目前尚未固定哪個編輯器php
有時候用的是UEditor,有時候用的CKEditor,KindEditor,TinyMCE。css
在網上查了不少資料，UEditor和其它的Web編輯器（富文本編輯器）在Chrome中能夠支持單張圖片粘貼。可是咱們的用戶須要處理的是Word中的圖片和文字，通常狀況下Word中的圖片可能有十幾張。有時候有幾十張。特別是用戶發一些教程或者使用說明類的文檔時圖片都是大幾十張的。 html
在網上找到說UEditor支持word粘貼，試了一下，只支持一張圖片的粘貼。多張圖片粘貼還須要用戶自已手動選擇。也就是說若是用戶粘貼的Word中包含20張圖片的話，那麼用戶就須要手動選擇20次，這種操做用戶是不可能接受的。java
網上找了好久，大部分都有一些不成熟的問題，皇天不負有心人終於讓我找到了一個成熟的項目。jquery
1.前臺頁面引用代碼
apache
<%@page language="java" import="java.util.*" pageEncoding="utf-8"%><%@json
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
示例下載：
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
eWebEditor9x：http://sina.lt/gcZa
測試教程：http://sina.lt/gaWK