1.需求
在一个项目中有个需求：复制word的内容到编辑器中。但是在复制过程中图片不能成功的复制过来，需要安装flash插件，但是吧又不能要求每个客户都安装上，这就比较麻烦了。所以考虑是不是可以把word转成html，这样放入编辑器中打开就没问题了把。
2.准备
麻烦的又来了，UEditor1.4之后才支持简便的二次开发扩展，但项目使用了老版本的UEditor，全面替换吧肯定又是一堆坑，没办法就只能改源码，顺便在这里记录一下。
3.实施
研究了一通之后发现主要业务逻辑写在了ueditor.all.js&ueditor.parse.js这两个js中，同时有大量的dialog去做了一些交互。
ueditor.all.js&ueditor.parse.js
我打算在上传附件时增加一个tab页去专门处理转换的工作，这样可以做到改动比较小。
3.1 增加上传附件并转换
UEditor的上传附件交互主要在dialog下的attachment文件夹，包括了attachment.html;attachment.css;attachment.js三个文件，下面依次来改下。
3.1.1 更改attachment.html
参照原来的tab页增加一个我们自己的：
Tab页对应的展示块：
0%
要想我们新增的内容匹配到文字描述，这里要配置下zh-cn.js和en.js
在en.js的'attachment':'static':中增加：
'lang_tab_transform': 'Word Trans Html',
'lang_word_upload':"Word upload",
在zh-cn.js的'attachment':'static':中增加：
'lang_tab_transform': 'Word转Html',
'lang_word_upload':"Word上传",
3.1.2 更改attachment.css
再添加相应的css，这个比较简单把原来upload的css复制一份，把"upload"改成我自己定义的"transform"添加进去即可。太多太长这里就不贴了。
3.1.3 更改attachment.js
首先增加一个对象transFile：
var uploadFile,
transFile,
onlineFile;
在设置tab的时候增加tansFile:
switch (id) {
case 'upload':
uploadFile = uploadFile || new UploadFile('queueList');
break;
case 'transform':
transFile = transFile || new UploadFile('queueListTrans');
break;
case 'online':
onlineFile = onlineFile || new OnlineFile('fileList');
break;
}
初始化dialog确认按钮时增加transFile:
/* 初始化onok事件 */
function initButtons() {
dialog.onok = function () {
var list = [], id, tabs = $G('tabhead').children;
for (var i = 0; i < tabs.length; i++) {
if (domUtils.hasClass(tabs[i], 'focus')) {
id = tabs[i].getAttribute('data-content-id');
break;
}
}
switch (id) {
case 'upload':
list = uploadFile.getInsertList();
var count = uploadFile.getQueueCount();
if (count) {
$('.info', '#queueList').html('' + '还有2个未上传文件'.replace(/[\d]/, count) + '');
return false;
}
editor.execCommand('insertfile', list);
break;
case 'transform':
list = transFile.getInsertList();
console.log("transFileUrl:"+list[0].url);
var wordHtml = wordTransHtml(list[0].url);
console.log("wordHtml:"+wordHtml);
editor.execCommand('insertHTML', wordHtml);
break;
case 'online':
list = onlineFile.getInsertList();
editor.execCommand('insertfile', list);
break;
}
// editor.execCommand('insertfile', list);
};
}
我不想写冗余的代码(主要是懒:)所以想复用原来上传的逻辑，但是原来代码里很多写死的ID，所以要改一下：
增加了个target记住当前的页面是哪个。
/* 上传附件 */
function UploadFile(target) {
this.target = target;
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
this.init();
}
在定义中新定义了一些ID:
//设置不同ID
filePickerBtnId = 'filePickerBtn',
filePickerReadyId = 'filePickerReady',
filePickerBlockId = 'filePickerBlock',
判断当前页面是不是我新加的，是的话变更值：
//如果为转换上传重新设置相关ID
if ("queueListTrans"==this.target){
filePickerBtnId = 'filePickerBtnTrans';
filePickerReadyId = 'filePickerReadyTrans';
filePickerBlockId = 'filePickerBlockTrans';
}
把下面用到写死的ID的地方替换成我定义的变量：
if (!WebUploader.Uploader.support()) {
$('#'+filePickerReadyId).after($('
').html(lang.errorNotSupport)).hide();
return;
} else if (!editor.getOpt('fileActionName')) {
$('#'+filePickerReadyId).after($('
').html(lang.errorLoadConfig)).hide();
return;
}
uploader = _this.uploader = WebUploader.create({
pick: {
id: '#'+filePickerReadyId,
label: lang.uploadSelectFile
},
swf: '../../third-party/webuploader/Uploader.swf',
server: actionUrl,
fileVal: editor.getOpt('fileFieldName'),
duplicate: true,
fileSingleSizeLimit: fileMaxSize,
compress: false
});
uploader.addButton({
id: '#'+filePickerBlockId
});
uploader.addButton({
id: '#'+filePickerBtnId,
label: lang.uploadAddFile
});
最后的效果便是这个样子的了：
前端请求后端的ajax方法：
function wordTransHtml(path) {
console.log("In wordTransHtml:"+path);
$.ajax({
type:"GET",
url:"../../../WordTransHtml",
data:{type:"docx",path:path},
success:function (data) {
console.log("wordTransHtml data:"+data);
console.log(data);
console.log("wordTransHtml data.body:"+data.body);
// $('#token').html(data);
},
error: function (err) {
$('#token').html(err);
}
});
}
3.2 实现后端的word转换html的服务
本来想用SpringMVC实现，看了下系统的架构还是老老实实的写个servlet吧。(：
3.2.1 所需jar包如下：
commons-fileupload
commons-fileupload
1.4
fr.opensagres.xdocreport
fr.opensagres.poi.xwpf.converter.xhtml
2.0.2
org.apache.poi
poi-scratchpad
4.1.0
org.apache.poi
poi-ooxml
4.1.0
3.2.2 后端Servlet
import com.alibaba.fastjson.JSONObject;
import com.ztesoft.util.WordToHtmlUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
public class WordTransHtmlServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("In WordTransHtmlServlet.");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
JSONObject resultJson = new JSONObject();
resultJson.put("code", "2");
resultJson.put("msg", "参数不合法");
resultJson.put("htmlStr", "");
try {
String path = request.getParameter("path");
path = System.getProperty("user.dir") + "/webapps" + path;
String[] paths = path.split("\\.");
System.out.println("WordTransHtmlServlet paths:" + paths + " length:" + paths.length);
System.out.println("WordTransHtmlServlet Class1:" + System.getProperty("user.dir"));
System.out.println("WordTransHtmlServlet Class2:" + this.getClass().getResource("/").getPath());
System.out.println("WordTransHtmlServlet Class3:" + request.getSession().getServletContext().getRealPath("../"));
String type = "";
if (paths.length > 1) type = paths[1];
System.out.println("WordTransHtmlServlet type:" + type + " path:" + path);
resultJson = wordTransformHtml(type, path);
} catch (Exception e) {
e.printStackTrace();
}
PrintWriter out = response.getWriter();
out.write(resultJson.toString());
}
/**
* 转换doc格式word为html
*/
private JSONObject wordTransformHtml(String type, String filePath) {
JSONObject resultJson = new JSONObject();
resultJson.put("code", "1");
resultJson.put("msg", "转换失败");
resultJson.put("html", "");
try {
String wordHtml = "";
WordToHtmlUtil wordToHtmlUtil = new WordToHtmlUtil();
if ("doc".equals(type)) {
wordHtml = wordToHtmlUtil.docToHtml(filePath);
} else if ("docx".equals(type)) {
wordHtml = wordToHtmlUtil.docxToHtml(filePath);
}
System.out.println("docTransformHtml wordHtml:" + wordHtml);
resultJson.put("code", "0");
resultJson.put("msg", "转换成功");
resultJson.put("html", wordHtml);
} catch (Exception e) {
e.printStackTrace();
}
return resultJson;
}
/**
* 获取文件
*/
private void getFile(String fileName) {
try {
String path = System.getProperty("user.dir");
System.out.println("path1:" + path);
path = path.replaceAll("\\\\", "/");
System.out.println("path1:" + path);
String filePath = path + "/webapp" + fileName;
System.out.println("filePath:" + filePath);
File file = new File(filePath);
PrintFileContext(file);
} catch (Exception e) {
e.printStackTrace();
}
}
private static void PrintFileContext(File file) throws Exception {
InputStream in = new FileInputStream(file);
InputStreamReader isr = new InputStreamReader(in);
BufferedReader br = new BufferedReader(isr);
String line = "";
while (true) {
line = br.readLine();
if (line == null) {
break;
}
System.out.println(line);
}
br.close();
}
}
3.2.3 后端Word转换Html的工具
import fr.opensagres.poi.xwpf.converter.xhtml.Base64EmbedImgManager;
import fr.opensagres.poi.xwpf.converter.xhtml.XHTMLConverter;
import fr.opensagres.poi.xwpf.converter.xhtml.XHTMLOptions;
import mons.io.FileUtils;
import org.apache.poi.hwpf.HWPFDocumentCore;
import org.apache.poi.hwpf.converter.WordToHtmlConverter;
import org.apache.poi.hwpf.converter.WordToHtmlUtils;
import org.apache.poi.hwpf.usermodel.Picture;
import org.apache.poi.xwpf.usermodel.XWPFDocument;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerException;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Base64;
public class WordToHtmlUtil {
public String docToHtml(String fileName) throws IOException, ParserConfigurationException, TransformerException {
String htmlStr = null;
try{
HWPFDocumentCore wordDocument = WordToHtmlUtils.loadDoc(new FileInputStream(fileName));
WordToHtmlConverter wordToHtmlConverter = new ImageConverter(
DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument()
);
wordToHtmlConverter.processDocument(wordDocument);
Document htmlDocument = wordToHtmlConverter.getDocument();
ByteArrayOutputStream out = new ByteArrayOutputStream();
DOMSource domSource = new DOMSource(htmlDocument);
StreamResult streamResult = new StreamResult(out);
TransformerFactory transformerFactory = TransformerFactory.newInstance();
Transformer serializer = transformerFactory.newTransformer();
serializer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");
serializer.setOutputProperty(OutputKeys.INDENT, "yes");
serializer.setOutputProperty(OutputKeys.METHOD, "html");
serializer.transform(domSource, streamResult);
out.close();
htmlStr = new String(out.toByteArray());
}catch (Exception e){
e.printStackTrace();
}
return htmlStr;
}
//docx转换html
public String docxToHtml(String fileName) throws IOException {
String htmlStr = null;
try{
XWPFDocument docxDocument = new XWPFDocument(new FileInputStream(fileName));
XHTMLOptions options = XHTMLOptions.create();
//图片转base64
options.setImageManager(new Base64EmbedImgManager());
// 转换htm1
ByteArrayOutputStream htmlStream = new ByteArrayOutputStream();
XHTMLConverter.getInstance().convert(docxDocument, htmlStream, options);
htmlStr = htmlStream.toString();
}catch (Exception e){
e.printStackTrace();
}
return htmlStr;
}
public class ImageConverter extends WordToHtmlConverter {
public ImageConverter(Document document) {
super(document);
}
@Override
protected void processImageWithoutPicturesManager(Element currentBlock, boolean inlined, Picture picture){
try{
Element imgNode = currentBlock.getOwnerDocument().createElement("img");
StringBuffer sb = new StringBuffer();
sb.append(Base64.getMimeEncoder().encodeToString(picture.getRawContent()));
sb.insert(0, "data:" + picture.getMimeType() + ";base64,");
imgNode.setAttribute("src", sb.toString());
currentBlock.appendChild(imgNode);
}catch (Exception e){
e.printStackTrace();
}
}
}
}
4.总结
至此，便通过把word转换成html实现了复制word的内容到编辑器中的功能，图片也完美的复制过去了。
