?
1.4.2之后官方并沒有做功能的改動,1.4.2在word復制這塊沒有bug,其他版本會出現手動無法轉存的情況
本文使用的后臺是Java。愛掏網 - it200.com前端為Jsp(前端都一樣,后臺如果語言不通得自己做 Base64編碼解碼)
因為公司業務需要支持IE8 ,網上其實有很多富文本框,效果都很好。愛掏網 - it200.com
例如www.wangEditor.com 但試了一圈都不支持IE8 。愛掏網 - it200.com
所以回到Ueditor,由于官方沒有維護,新的neuditor 也不知道什么時候能支持word自動轉存,只能自己想辦法。愛掏網 - it200.com
如果沒有必要,不建議使用ueditor。愛掏網 - it200.com我也是沒有辦法。愛掏網 - it200.com
改動過后的插件只適合IE8。愛掏網 - it200.com
這里要說明的一點是百度官方的編輯器不支持word圖片批量轉存,粘貼word后需要手動選擇圖片再進行上傳一次操作。愛掏網 - it200.com網上找到的大部分的示例都是這個操作。愛掏網 - it200.com如果需要自動批量上傳word圖片的話可以使用WordPaster這個控件。愛掏網 - it200.com
1.IE設置
在受信任站點里添加信任網站。愛掏網 - it200.com
這里本機測試使用的直接是 http://localhost
因為需要讀取客戶端的文件,所以需要設置允許訪問數據源。愛掏網 - it200.com
ActiveXObject設置可以去網上參考,這里不列舉了。愛掏網 - it200.com
前面的
到這里 IE 的準備工作完成了。愛掏網 - it200.com
修改ueditor.all.js關鍵代碼
14006行附近,如果是其他版本的ueditor,在功能正常的情況下,可以拷貝下面代碼。愛掏網 - it200.com
var imgPath= attrs.src;
var imgUrl= attrs.src;
if(navigator.appName===Microsoft Internet Explorer){//判斷是否是IE瀏覽器
if(navigator.userAgent.match(/Trident/i)&& navigator.userAgent.match(/MSIE 8.0/i)){//判斷瀏覽器內核是否為Trident內核IE8.0
var realPath= imgPath.substring(8, imgPath.length);
var filename= imgPath.substring(imgPath.lastIndexOf(/)+ 1, imgPath.length);
var result= UploadForIE.saveAttachment(filename, realPath);
if(result){
var json= eval((+ result+));
imgUrl= json.url;
}
}
}
img.setAttr({
width: attrs.width,
height: attrs.height,
alt: attrs.alt,
word_img: attrs.src,
src: imgUrl,
style:background:url(+(flag? opt.themePath+ opt.theme+/images/word.gif: opt.langPath+ opt.lang+/images/localimage.png)+) no-repeat center center;border:1px solid #ddd
})
uploadForIE.js。愛掏網 - it200.com
var UploadForIE={
//保存到xml附件,并且通過ajax 上傳
saveAttachment:function(upload_filename,localFilePath){
//后臺接受圖片保存的方法。愛掏網 - it200.com
var upload_target_url=uploadImg;
var strTempFile=localFilePath;
//創建XML對象,組合XML文檔數據
var xml_dom=UploadForIE.createDocument();
xml_dom.loadXML(
//創建ADODB.Stream對象
var ado_stream=newActiveXObject(adodb.stream);
//設置流數據類型為二進制類型
ado_stream.Type=1;// adTypeBinary
//打開ADODB.Stream對象
ado_stream.Open();
//將本地文件裝載到ADODB.Stream對象中
ado_stream.LoadFromFile(strTempFile);
//獲取文件大小(以字節為單位)
var byte_size=ado_stream.Size;
//設置數據傳輸單元大小為1KB
var byte_unit=1024;
//獲取文件分割數據單元的數量
var read_count=parseInt((byte_size/byte_unit).toString())+parseInt(((byte_size%byte_unit)==0)?0:1);
//創建XML元素節點,保存上傳文件名稱
var node=xml_dom.createElement(uploadFilename);
node.text=upload_filename.toString();
var root=xml_dom.documentElement;
root.appendChild(node);
//創建XML元素節點,保存上傳文件大小
var node=xml_dom.createElement(uploadFileSize);
node.text=byte_size.toString();
root.appendChild(node);
//創建XML元素節點,保存上傳文件內容
for(var i=0;i var node=xml_dom.createElement(uploadContent); //文件內容編碼方式為Base64 node.dataType=bin.base64; //判斷當前保存的數據節點大小,根據條件進行分類操作 if((parseInt(byte_size%byte_unit)!=0)&&(i==parseInt(read_count-1))){ //當數據包大小不是數據單元的整數倍時,讀取最后剩余的小于數據單元的所有數據 node.nodeTypedValue=ado_stream.Read(); }else{ //讀取一個完整數據單元的數據 node.nodeTypedValue=ado_stream.Read(byte_unit); } root.appendChild(node); } //關閉ADODB.Stream對象 ado_stream.Close(); delete ado_stream; //創建Microsoft.XMLHTTP對象 // var xmlhttp = new ActiveXObject(microsoft.xmlhttp); var xmlhttp=window.XMLHttpRequest?newXMLHttpRequest():newActiveXObject(Microsoft.XMLHttp); //打開Microsoft.XMLHTP對象 xmlhttp.open(post,upload_target_url,false); //使用Microsoft.XMLHTP對象上傳文件 xmlhttp.send(xml_dom); var state=xmlhttp.readyState; var success_state=true; if(state!=4){ success_state=false; } var result=xmlhttp.responseText; delete xmlhttp; returnresult; }, //創建DOMdocuemnt createDocument:function(){ var xmldom; var versions=[MSXML2.DOMDocument.6.0,MSXML2.DOMDocument.5.0,MSXML2.DOMDocument.4.0,MSXML2.DOMDocument.3.0,MSXML2.DOMDocument], i, len; for(i=0,len=versions.length;i try{ xmldom=newActiveXObject(versions[i]); if(xmldom!=null)break; }catch(ex){ //跳過 alert(創建document對象失敗!); } } returnxmldom; } } UEditorAction保存圖片方法 @RequestMapping(/uploadImg) publicvoiduploadADO(HttpServletRequest request,HttpServletResponse response){ String path1=request.getContextPath(); String basePath=request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path1; String rootPath=request.getServletContext().getRealPath(/); //設置數據傳輸單元大小為1KB intunit_size=1024; //初始化xml文件大小(以字節為單位) intxmlFileSize=0; //初始化上傳文件名稱(完整文件名) String xmlFilename=; //初始化上傳文件保存路徑(絕對物理路徑) String xmlFilepath=; //聲明文件存儲字節數組 byte[]xmlFileBytes=null; try{ //初始化 SAX 串行xml文件解析器 SAXBuilder builder=newSAXBuilder(); Document doc=builder.build(request.getInputStream()); Element eRoot=doc.getRootElement(); //獲取上傳文件的完整名稱 Iterator it_name=eRoot.getChildren(uploadFilename).iterator(); if(it_name.hasNext()){ xmlFilename=((Element)it_name.next()).getText(); } //存放的相對路徑目錄 String relativePath=/temp/+EditorUtil.getToday()+/; xmlFilepath=rootPath+relativePath; //獲取上傳文件的大小 Iterator it_size=eRoot.getChildren(uploadFileSize).iterator(); if(it_size.hasNext()){ xmlFileSize=Integer.parseInt(((Element)it_size.next()) .getText()); if(xmlFileSize>0){ intunit_count=0; //為存儲文件內容的字節數組分配存儲空間 xmlFileBytes=newbyte[xmlFileSize]; //循環讀取文件內容,并保存到字節數組中 Iterator it_content=eRoot.getChildren(uploadContent) .iterator(); while(it_content.hasNext()){ //初始化Base64編碼解碼器 BASE64Decoder base64=newBASE64Decoder(); byte[]xmlNodeByteArray=base64 .decodeBuffer(((Element)it_content.next()) .getText()); if(xmlNodeByteArray.length>=unit_size){ //讀取一個完整數據單元的數據 System.arraycopy(xmlNodeByteArray,0,xmlFileBytes, unit_count*unit_size,unit_size); }else{ //讀取小于一個數據單元的所有數據 System.arraycopy(xmlNodeByteArray,0,xmlFileBytes, unit_count*unit_size,xmlFileSize %unit_size); } //繼續向下讀取文件內容 unit_count++; } } } //保存路徑 File path=newFile(xmlFilepath); if(!path.exists()){ path.mkdirs(); } //保存文件 word粘貼圖片的名稱 File file=newFile(path,xmlFilename); //創建文件輸入輸出流 FileOutputStream fos=newFileOutputStream(file); //寫入文件內容 fos.write(xmlFileBytes); fos.flush(); //關閉文件輸入輸出流 fos.close(); ReturnUploadImage rui=newReturnUploadImage(); rui.setTitle(xmlFilename);//這里需要設置文件名稱如:xxx.jpg rui.setOriginal(xmlFilename);//這里需要設置文件名稱如:xxx.jpg rui.setState(SUCCESS); rui.setUrl(basePath+relativePath+xmlFilename); JSONObject json=newJSONObject(rui); String result=json.toString();//這邊就是為了返回給UEditor做的格式轉換 response.getWriter().write(result); }catch(Exception e){ e.printStackTrace(); } } 優化后的代碼: upload.jsp /* 更新記錄: 2024-01-25取消對SmartUpload的使用,改用commons-fileupload組件。愛掏網 - it200.com因為測試發現SmartUpload有內存泄露的問題。愛掏網 - it200.com */ //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 booleanisMultipart = ServletFileUpload.isMultipartContent(request); FileItemFactory factory =newDiskFileItemFactory(); ServletFileUpload upload =newServletFileUpload(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字段而不是上傳域的文件域(等) 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 =newUploader(pageContext,request); up.SaveFile(imgFile); String url = up.GetFilePathRel(); out.write(url); response.setHeader(Content-Length,url.length()+);//返回Content-length標記,以便控件正確讀取返回地址。愛掏網 - it200.com %> 剩下的后臺功能和js參考下載文件中的UEditorAction 和 uploadForIE.js。愛掏網 - it200.com 下面是我安裝的依賴pom結構,可以根據自己的進行調整。愛掏網 - it200.com ueditor 基于springboot 和idea ,這里只提取了自動轉存功能出來,功能還沒測試,git代碼沒做公開,等后續測試好了再公開。愛掏網 - it200.com 可以先使用csdn下載查看代碼。愛掏網 - it200.com pom里引用了ueditor.jar 需要根據各自情況安裝jar包 1.4.2中的jar包版本是1.1.0 mvn install:install-file -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.0 -Dpackaging=jar -Dfile=\ueditor\jsp\lib\ueditor-1.1.0.jar 運行 UeditorApplication的main方法 然后訪問http://localhost:8088/ueditor/ 就可以測試了。愛掏網 - it200.com 詳細資料可以參考這篇文章: 詳細思路及源碼 示例下載: wordpaster-vue3-cli-ueditor1.5,wordpaster-vue-ueditor1.5,wordpaster-asp.net-ueditor1.5x,wordpaster-php-ueditor1x,wordpaster-jsp-ueditor1x? ?