需求:百度编辑器上增加一个按钮,上传word文档并自动添加内容到编辑框
思路:1,百度编辑器增加上传按钮;2,解析word文档,返回富文本;3,插入富文本到编辑框
第一,百度编辑器增加自定义按钮
-
ueditor.config.js这个配置文件里,toolbars数组增加自定义按钮的标识,自己取的名字
我这里加了一个wordimport
此处有坑,用wordimport可以,用wordImport不行,鼠标悬停不提示,功能用不了,仔细观察默认的,发现都是小写,没有一个大写字母,看来这里工具栏的标识不支持大写字母【我用的版本是1.4.3.1】 -
ueditor.config.js文件中labelMap加上鼠标悬停的提示语,注意,labelMap默认是注释掉的,鼠标悬停默认读的是zh-cn.js文件中的labelMap
-
设置工具栏上显示的小图标,ueditor.css样式文件中加按钮图标路径
-
配置显示按钮,注意:很关键,不配置不显示,ueditor.all.js文件中btnCmds数组配置上前面自定义的标识wordimport
-
给按钮配置上事件,在ueditor.all.js文件中加上UE.commands[‘wordimport’]
UE.commands['wordimport'] = {
execCommand : function() {
var me = this;
try {
if(typeof wordimport === "function") {
wordimport(me.key);//回传富文本所在的元素ID
} else {
console.log("wordimport is not full");
}
} catch(e) {
console.log("wordimport:"+e);
}
},
queryCommandState : function() {
return false;
}
};
在引用富文本的地方加上wordimport函数
效果
第二,解析word文档,返回富文本,插入富文本到编辑框
主要思路:工具栏按钮点击后触发input框上传,input框上传后触发input框的onchange事件,发送ajax异步请求,将文件传到后端,后端拿到word文档,使用aspose.word保存为html文件,再使用jsoup解析html,处理图片路径,或者调整html,最后返回富文本
主要代码如下
<div style="display: none;">
<form id="wordimportform" enctype="multipart/form-data">
<input type="file" name="wordimportfile" id="wordimportfile" onchange="javascript:asyncUploadFile()" />
</form>
</div>
<div class="modal fade" id="loadingModal">
<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
<div class="progress progress-striped active" style="margin-bottom: 0;">
<div class="progress-bar" style="width: 100%;"></div>
</div>
<h5 style="color: #5BC0DE;">正在加载...</h5>
</div>
</div>
function wordimport(key){
// var content = ue.getContentTxt();
// ue.execCommand('insertHtml', "<h1>富文本</h1>");
$("#wordimportfile").click();
}
function asyncUploadFile() {
// $("#loadingModal").modal('show');
$("#loadingModal").modal({backdrop: 'static', keyboard: false});
var formData = new FormData($('#wordimportform')[0]);
$("#wordimportfile").val('');
$.ajax({
url:'${managerPath}/cms/article/wordimport4editor.do',
type:'POST',
data:formData,
dataType:'text',
cache: false,
processData: false,
contentType: false,
success:function (result) {
ue.execCommand('insertHtml', result);
$("#loadingModal").modal('hide');
},
error:function (error) {
console.log(error);
$("#loadingModal").modal('hide');
}
});
}
@PostMapping("/wordimport4editor")
public void wordimport4editor(HttpServletRequest request, HttpServletResponse response){
MultipartResolver resolver = new CommonsMultipartResolver(servletContext);
MultipartHttpServletRequest multipartHttpServletRequest = resolver.resolveMultipart(request);
MultipartFile wordimportfile = multipartHttpServletRequest.getFile("wordimportfile");
String wordHtml = articleBiz.getWordHtml(wordimportfile);
this.outJson(response,wordHtml);
}
@Override
public String getWordHtml(MultipartFile wordimportfile) {
File saveFile = null;
File htmlFile = null;
try {
//保存文件
String originalFilename = wordimportfile.getOriginalFilename();
String webRootPath = servletContext.getRealPath("/");
Calendar calendar = Calendar.getInstance();
int month = calendar.get(Calendar.MONTH);
String releativePath = "upload" + File.separator + "wordArticle" + File.separator + (month + 1);
String dirPath = webRootPath + File.separator + releativePath;
String saveFilePath = dirPath + File.separator + UUID.randomUUID().toString() + "_" + originalFilename;
saveFile = new File(saveFilePath);
if (!saveFile.getParentFile().exists()) saveFile.getParentFile().mkdirs();
wordimportfile.transferTo(saveFile);
String htmlFileName = UUID.randomUUID().toString();
//保存为html文件
String htmlFilePath = dirPath + File.separator + htmlFileName + ".html";
Document document = new Document(saveFilePath);
document.save(htmlFilePath, SaveFormat.HTML);
//解析html文件
htmlFile = new File(htmlFilePath);
org.jsoup.nodes.Document doc = Jsoup.parse(htmlFile, "UTF-8");
Elements imgs = doc.getElementsByTag("img");
for (Element img : imgs) {
String imgSrc = img.attr("src");
img.removeAttr("src");
img.attr("src", "/upload/wordArticle/" + (month + 1) + "/" + imgSrc);
}
String html = doc.html();
// log.debug(html);
return html;
} catch (Exception e) {
log.error("error:",e);
if (saveFile != null && saveFile.exists()) saveFile.delete();
if (htmlFile != null && htmlFile.exists()) htmlFile.delete();
return "";
}
}
使用效果
注意:1,使用ue.execCommand(‘insertHtml’, result);向编辑框插入富文本。2,使用jquery+bootstrap做了一个导入过程中的加载遮罩效果,具体上面的代码中都有。