百度ueditor实现word图片自动转存

官网地址http://ueditor.baidu.com

Git 地址 https://github.com/fex-team/ueditor

本文使用版本 https://pan.baidu.com/s/1ntG3Tsl#list/path=%2F 里选择1.4.2

1.4.2之后官方并没有做功能的改动，1.4.2在word复制这块没有bug，其他版本会出现手动无法转存的情况

参考博客地址 https://blog.csdn.net/zen_123/article/details/18549737

本文使用的后台是Java。前端为Jsp（前端都一样，后台如果语言不通得自己做 Base64编码解码）

因为公司业务需要支持IE8 ，网上其实有很多富文本框，效果都很好。

例如www.wangEditor.com 但试了一圈都不支持IE8 。

所以回到Ueditor，由于官方没有维护，新的neuditor 也不知道什么时候能支持word自动转存，只能自己想办法。

如果没有必要，不建议使用ueditor。我也是没有办法。

改动过后的插件只适合IE8。

1.IE设置

在受信任站点里添加信任网站。

这里本机测试使用的直接是 http://localhost

因为需要读取客户端的文件，所以需要设置允许访问数据源。

ActiveXObject设置可以去网上参考，这里不列举了。

前面的

到这里 IE 的准备工作完成了。

修改ueditor.all.js关键代码

14006行附近,如果是其他版本的ueditor，在功能正常的情况下，可以拷贝下面代码。

 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.0var 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。

var UploadForIE = {// 保存到xml附件，并且通过ajax 上传saveAttachment: function (upload_filename, localFilePath) {//后台接受图片保存的方法。var upload_target_url = "uploadImg";var strTempFile = localFilePath;
// 创建XML对象，组合XML文档数据var xml_dom = UploadForIE.createDocument();xml_dom.loadXML('<?xml version="1.0" encoding="GBK" ?> <root/>');// 创建ADODB.Stream对象var ado_stream = new ActiveXObject("adodb.stream");
// 设置流数据类型为二进制类型ado_stream.Type = 1; // adTypeBinary
// 打开ADODB.Stream对象ado_stream.Open();
// 将本地文件装载到ADODB.Stream对象中ado_stream.LoadFromFile(strTempFile);
// 获取文件大小（以字节为单位）var byte_size = ado_stream.Size;
// 设置数据传输单元大小为1KBvar 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 < read_count; i++) {var node = xml_dom.createElement("uploadContent");
// 文件内容编码方式为Base64node.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 ? new XMLHttpRequest() : new ActiveXObject("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;return result;},// 创建DOMdocuemntcreateDocument: 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 < len; i++) {try {xmldom = new ActiveXObject(versions[i]);if (xmldom != null)break;} catch (ex) {
//跳过alert("创建document对象失败！");}}return xmldom;}
}

UEditorAction保存图片方法

@RequestMapping("/uploadImg")public void uploadADO(HttpServletRequest request, HttpServletResponse response) {String path1 = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() +path1;String rootPath = request.getServletContext().getRealPath("/");// 设置数据传输单元大小为1KBint unit_size = 1024;// 初始化xml文件大小（以字节为单位）int xmlFileSize = 0;// 初始化上传文件名称（完整文件名）String xmlFilename = "";// 初始化上传文件保存路径（绝对物理路径）String xmlFilepath = "";// 声明文件存储字节数组byte[] xmlFileBytes = null;try {// 初始化 SAX 串行xml文件解析器SAXBuilder builder = new SAXBuilder();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) {int unit_count = 0;// 为存储文件内容的字节数组分配存储空间xmlFileBytes = new byte[xmlFileSize];// 循环读取文件内容，并保存到字节数组中Iterator it_content = eRoot.getChildren("uploadContent").iterator();while (it_content.hasNext()) {// 初始化Base64编码解码器BASE64Decoder base64 = new BASE64Decoder();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 = new File(xmlFilepath);if(!path.exists()){path.mkdirs();}// 保存文件 word粘贴图片的名称File file = new File(path,xmlFilename);// 创建文件输入输出流FileOutputStream fos = new FileOutputStream(file);// 写入文件内容fos.write(xmlFileBytes);fos.flush();// 关闭文件输入输出流fos.close();ReturnUploadImage rui = new ReturnUploadImage();rui.setTitle(xmlFilename);//这里需要设置文件名称如：xxx.jpgrui.setOriginal(xmlFilename);//这里需要设置文件名称如：xxx.jpgrui.setState("SUCCESS");rui.setUrl(basePath +relativePath+xmlFilename);JSONObject json = new JSONObject(rui);String result = json.toString();//这边就是为了返回给UEditor做的格式转换response.getWriter().write(result);} catch (Exception e) {e.printStackTrace();}}

剩下的后台功能和js参考下载文件中的

UEditorAction 和 uploadForIE.js。

下面是我安装的依赖pom结构，可以根据自己的进行调整。

  <dependency><groupId>com.baidu</groupId><artifactId>ueditor</artifactId><version>1.1.0</version></dependency>

基于springboot 和idea ，这里只提取了自动转存功能出来，功能还没测试，git代码没做公开，等后续测试好了再公开。

可以先使用csdn下载查看代码。

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/ 就可以测试了。

完整包下载

https://download.csdn.net/download/m673010624/11188589

csdn下载默认5分，不能设置下载积分了。需要的同学可以先下载查看，后续尽快上传到码云。

百度ueditor实现word图片自动转存相关推荐

ueditor实现word图片自动转存
tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...
百度ueditor粘贴word图片且图片文件自动上传功能
当前功能基于PHP,其它语言流程大致相同 1.新增上传word json配置在ueditor\php\config.json中新增如下配置: /* 上传word配置 */ "wordAct ...
ueditor粘贴word图片无法显示的问题
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
百度ueditor - 支持word上传的富文本编辑器
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
C# 实现Word图片自动编号功能
有时候创建一个比较大的文档,需要用到大量图片时,我们一般都会对图片进行编号.这时,若采用手动为图片编号的方法,耗时耗力而且容易出错.其实使用Word的题注功能,可以轻松搞定图片自动编号.这篇文章将介绍 ...
word图片自动编号，前面加章节号
老实说很多人都没有系统性地学过WORD,毕竟所见即所得,就是学过也比较浅.那么在使用word写作论文时就会感到很烦,因为你想要控制好章节,这样很多的地方就可以按照这种章节自动编号,处理不同节的页眉和页 ...
Word图片自动编号，调整图片顺序自动更新图片编号，引用该图片的地方也对应更新
Word图片自动编号,调整图片顺序自动更新图片编号,引用该图片的地方也对应更新 1.软件环境⚙️ 2.问题描述
百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
我们在上篇文章中学习了上传图片的配置: 百度ueditor富文本--配置图片上传在文章的最后讲到 ueditor 默认设置的保存图片的路径是相对路径,项目相关的. 保存的图片会放在to ...
Word图片自动编号，Mathtype引用自动编号，交叉引用上标设置
Word中常用自动编号主要有三个: 注意:文中需要格式正确(正文,标题,题注格式设置正确) 公式和目录一样,全选后摁F9更新. 图片的编号公式的编号引用文献的编号这三个部分通常在写文章的时候序号 ...
ueditor+实现word图片自动上传
公司做的项目要用到文本上传功能. 网上找了很久,大部分都有一些不成熟的问题,终于让我找到了一个成熟的项目. 1.前台页面引用代码 <%@page language="java" ...

百度ueditor实现word图片自动转存

百度ueditor实现word图片自动转存相关推荐

最新文章

热门文章