wordpress粘貼word圖片且圖片文件自動上傳功能

?

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

com.baidu

ueditor

1.1.0

基于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?

?

聲明:所有內容來自互聯網搜索結果,不保證100%準確性,僅供參考。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。
發表評論
更多 網友評論0 條評論)
暫無評論

返回頂部

主站蜘蛛池模板: 97在线公开视频| 青青青国产精品视频| 成人永久免费高清| 亚洲成AV人片在线观看无码不卡| 色情无码www视频无码区小黄鸭| 国产精品视频九九九| 中文字幕无码不卡一区二区三区| 欧美日韩中文字幕在线视频| 国产69精品久久久久777| 手机在线观看视频你懂的| 少妇被躁爽到高潮无码人狍大战| 久久青青成人亚洲精品| 澳门永久av免费网站| 国产69精品久久久久999小说 | 青春草国产成人精品久久| 在线中文字幕日韩| 中文字幕一区精品| 日韩精品无码一区二区三区免费| 亚洲精品自产拍在线观看| 美女被免费网站视频九色| 国产成人高清亚洲一区91| 99亚洲精品高清一二区| 无码av天天av天天爽| 亚洲av无码专区国产不乱码| 狠狠躁夜夜躁人人爽超碰97香蕉| 夜夜爽77777妓女免费看| 丰满多毛的大隂户毛茸茸| 极品少妇被啪到呻吟喷水| 亚洲精品123区在线观看| 精品人妻VA出轨中文字幕| 国内精品久久久久影视| 一级片免费网址| 日本三级在线视频| 亚洲av成人综合网| 欧美日韩国产色综合一二三四| 免费大片av手机看片| 色噜噜狠狠成人网| 国产大陆亚洲精品国产| 北岛玲日韩精品一区二区三区| 在线观看老湿视频福利| 一级一级特黄女人精品毛片视频|