1. 程式人生 > 其它 >xhEditor - 支援word上傳的富文字編輯器

xhEditor - 支援word上傳的富文字編輯器

這種方法是servlet,編寫好在web.xml裡配置servlet-class和servlet-mapping即可使用

後臺(服務端)java服務程式碼:(上傳至ROOT/lqxcPics資料夾下)

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@

pagecontentType="text/html;charset=utf-8"%><%@

pageimport="Xproer.*"%><%@

pageimport="org.apache.commons.lang.StringUtils"%><%@

pageimport="org.apache.commons.fileupload.*"%><%@

pageimport="org.apache.commons.fileupload.disk.*"%><%@

pageimport="org.apache.commons.fileupload.servlet.*"%><%

booleanisMultipart = ServletFileUpload.isMultipartContent(request);

FileItemFactory factory =newDiskFileItemFactory();

ServletFileUpload upload =newServletFileUpload(factory);

Listfiles =null;

try

{

files = upload.parseRequest(request);

}

catch(FileUploadException e)

{

out.println("上傳檔案異常:"+e.toString());

return;

}

FileItem imgFile =null;

IteratorfileItr = files.iterator();

while(fileItr.hasNext())

{

imgFile = (FileItem) fileItr.next();

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()+"");

%>

配置web.xml

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appversion="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

前端(頁面)測試程式碼:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>WordPaster-jsp-ueditor-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/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/skygqbox.js"charset="utf-8"></script>

<scripttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>

</head>

<body>

<textareaname="後臺取值的key"id="myEditor">這裡寫你的初始化內容</textarea>

<scripttype="text/javascript">

varpasterMgr =newWordPasterManager();

//pasterMgr.Config["PostUrl"] = "http://www.ncmem.com/products/upload_ori.aspx"

pasterMgr.Config["PostUrl"] ="http://localhost:8080/WordPaster2UEditor1.4x/upload.jsp"

//pasterMgr.Config["PostUrl"] = "http://cloud.dyso.cn/ueditor/upload.jsp"

pasterMgr.Load();//載入控制元件

varue = UE.getEditor('myEditor');

ue.ready(function() {

//設定編輯器的內容

ue.setContent('hello');

//獲取html內容,返回: <p>hello</p>

varhtml = ue.getContent();

//獲取純文字內容,返回: hello

vartxt = ue.getContentTxt();

pasterMgr.SetEditor(ue);

});

</script>

</body>

</html>

實現後的效果,能夠批量上傳word中的全部圖片,大幅度提升圖片上傳效率。而且能夠保留Word樣式。

圖片上傳完後,編輯器裡面的圖片地址也全部都改成了伺服器的圖片地址了,

所有程式碼已經全部傳到網上,有需要的朋友可以直接下載使用,http://blog.ncmem.com/wordpress/2019/08/07/javaword圖片上傳控制元件/

討論群:223813913