怎么实现将word中的公式导入（或粘贴）到编辑中tinymce

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

本文使用的后台是Java。前端为Jsp&＃xff08;前端都一样&＃xff0c;后台如果语言不通得自己做 Base64编码解码&＃xff09;

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

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

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

如果没有必要&＃xff0c;不建议使用ueditor。我也是没有办法。

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

这里要说明的一点是百度官方的编辑器不支持word图片批量转存&＃xff0c;粘贴word后需要手动选择图片再进行上传一次操作。网上找到的大部分的示例都是这个操作。如果需要自动批量上传word图片的话可以使用WordPaster这个控件。

1.IE设置

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

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

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

ActiveXObject设置可以去网上参考&＃xff0c;这里不列举了。

前面的

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

修改ueditor.all.js关键代码

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

var imgPath &＃61; attrs.src;

var imgUrl &＃61; attrs.src;

if (navigator.appName &＃61;&＃61;&＃61; &＃39;Microsoft Internet Explorer&＃39;) { //判断是否是IE浏览器

    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0

        var realPath &＃61; imgPath.substring(8, imgPath.length);

        var filename &＃61; imgPath.substring(imgPath.lastIndexOf(&＃39;/&＃39;) &＃43; 1, imgPath.length);

        var result &＃61; UploadForIE.saveAttachment(filename, realPath);

        if (result) {

            var json &＃61; eval(&＃39;(&＃39; &＃43; result &＃43; &＃39;)&＃39;);

            imgUrl &＃61; json.url;

        }

    }

}

img.setAttr({

    width: attrs.width,

    height: attrs.height,

    alt: attrs.alt,

    word_img: attrs.src,

    src: imgUrl,

    &＃39;style&＃39;: &＃39;background:url(&＃39; &＃43; (flag ? opt.themePath &＃43; opt.theme &＃43; &＃39;/images/word.gif&＃39;: opt.langPath &＃43; opt.lang &＃43; &＃39;/images/localimage.png&＃39;) &＃43; &＃39;) no-repeat center center;border:1px solid #ddd&＃39;

})

uploadForIE.js。

var UploadForIE &＃61; {

    // 保存到xml附件&＃xff0c;并且通过ajax 上传

    saveAttachment: function(upload_filename, localFilePath) {

        //后台接受图片保存的方法。

        var upload_target_url &＃61; "uploadImg";

        var strTempFile &＃61; localFilePath;

        // 创建XML对象&＃xff0c;组合XML文档数据

        var xml_dom &＃61; UploadForIE.createDocument();

        xml_dom.loadXML(&＃39; &＃39;);

        // 创建ADODB.Stream对象

        var ado_stream &＃61; new ActiveXObject("adodb.stream");

        // 设置流数据类型为二进制类型

        ado_stream.Type &＃61; 1; // adTypeBinary

        // 打开ADODB.Stream对象

        ado_stream.Open();

        // 将本地文件装载到ADODB.Stream对象中

        ado_stream.LoadFromFile(strTempFile);

        // 获取文件大小&＃xff08;以字节为单位&＃xff09;

        var byte_size &＃61; ado_stream.Size;

        // 设置数据传输单元大小为1KB

        var byte_unit &＃61; 1024;

        // 获取文件分割数据单元的数量

        var read_count &＃61; parseInt((byte_size / byte_unit).toString()) &＃43; parseInt(((byte_size % byte_unit) &＃61;&＃61; 0) ? 0 : 1);

        // 创建XML元素节点&＃xff0c;保存上传文件名称

        var node &＃61; xml_dom.createElement("uploadFilename");

        node.text &＃61; upload_filename.toString();

        var root &＃61; xml_dom.documentElement;

        root.appendChild(node);

        // 创建XML元素节点&＃xff0c;保存上传文件大小

        var node &＃61; xml_dom.createElement("uploadFileSize");

        node.text &＃61; byte_size.toString();

        root.appendChild(node);

        // 创建XML元素节点&＃xff0c;保存上传文件内容

        for (var i &＃61; 0; i < read_count; i&＃43;&＃43;) {

            var node &＃61; xml_dom.createElement("uploadContent");

            // 文件内容编码方式为Base64

            node.dataType &＃61; "bin.base64";

            // 判断当前保存的数据节点大小&＃xff0c;根据条件进行分类操作

            if ((parseInt(byte_size % byte_unit) !&＃61; 0) && (i &＃61;&＃61; parseInt(read_count - 1))) {

                // 当数据包大小不是数据单元的整数倍时&＃xff0c;读取最后剩余的小于数据单元的所有数据

                node.nodeTypedValue &＃61; ado_stream.Read();

            } else {

                // 读取一个完整数据单元的数据

                node.nodeTypedValue &＃61; ado_stream.Read(byte_unit);

            }

            root.appendChild(node);

        }

        // 关闭ADODB.Stream对象

        ado_stream.Close();

        delete ado_stream;

        // 创建Microsoft.XMLHTTP对象

        // var xmlhttp &＃61; new ActiveXObject("microsoft.xmlhttp");

        var xmlhttp &＃61; 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 &＃61; xmlhttp.readyState;

        var success_state &＃61; true;

        if (state !&＃61; 4) {

            success_state &＃61; false;

        }

        var result &＃61; xmlhttp.responseText;

        delete xmlhttp;

        return result;

    },

    // 创建DOMdocuemnt

    createDocument: function() {

        var xmldom;

        var versions &＃61; ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument"],

        i,

        len;

        for (i &＃61; 0, len &＃61; versions.length; i < len; i&＃43;&＃43;) {

            try {

                xmldom &＃61; new ActiveXObject(versions[i]);

                if (xmldom !&＃61; null) break;

            } catch(ex) {

                //跳过

                alert("创建document对象失败&＃xff01;");

            }

        }

        return xmldom;

    }

}

UEditorAction保存图片方法

&＃64;RequestMapping("/uploadImg")

    public void uploadADO(HttpServletRequest request, HttpServletResponse response) {

        String path1 &＃61; request.getContextPath();

        String basePath &＃61; request.getScheme() &＃43; "://" &＃43; request.getServerName() &＃43; ":" &＃43; request.getServerPort() &＃43;path1;

        String rootPath &＃61; request.getServletContext().getRealPath("/");

        // 设置数据传输单元大小为1KB

        int unit_size &＃61; 1024;

        // 初始化xml文件大小&＃xff08;以字节为单位&＃xff09;

        int xmlFileSize &＃61; 0;

        // 初始化上传文件名称&＃xff08;完整文件名&＃xff09;

        String xmlFilename &＃61; "";

        // 初始化上传文件保存路径&＃xff08;绝对物理路径&＃xff09;

        String xmlFilepath &＃61; "";

        // 声明文件存储字节数组

        byte[] xmlFileBytes &＃61; null;

        try {

            // 初始化 SAX 串行xml文件解析器

            SAXBuilder builder &＃61; new SAXBuilder();

            Document doc &＃61; builder.build(request.getInputStream());

            Element eRoot &＃61; doc.getRootElement();

            // 获取上传文件的完整名称

            Iterator it_name &＃61; eRoot.getChildren("uploadFilename").iterator();

            if (it_name.hasNext()) {

                xmlFilename &＃61; ((Element) it_name.next()).getText();

            }

            //存放的相对路径目录

            String  relativePath &＃61; "/temp/"&＃43;EditorUtil.getToday()&＃43;"/";

            xmlFilepath &＃61; rootPath&＃43; relativePath;

            // 获取上传文件的大小

            Iterator it_size &＃61; eRoot.getChildren("uploadFileSize").iterator();

            if (it_size.hasNext()) {

                xmlFileSize &＃61; Integer.parseInt(((Element) it_size.next())

                        .getText());

                if (xmlFileSize > 0) {

                    int unit_count &＃61; 0;

                    // 为存储文件内容的字节数组分配存储空间

                    xmlFileBytes &＃61; new byte[xmlFileSize];

                    // 循环读取文件内容&＃xff0c;并保存到字节数组中

                    Iterator it_content &＃61; eRoot.getChildren("uploadContent")

                            .iterator();

                    while (it_content.hasNext()) {

                        // 初始化Base64编码解码器

                        BASE64Decoder base64 &＃61; new BASE64Decoder();

                        byte[] xmlNodeByteArray &＃61; base64

                                .decodeBuffer(((Element) it_content.next())

                                        .getText());

                        if (xmlNodeByteArray.length >&＃61; 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&＃43;&＃43;;

                    }

                }

            }

            // 保存路径

            File path &＃61; new File(xmlFilepath);

            if(!path.exists()){

                path.mkdirs();

            }

            // 保存文件 word粘贴图片的名称

            File file &＃61; new File(path,xmlFilename);

            // 创建文件输入输出流

            FileOutputStream fos &＃61; new FileOutputStream(file);

            // 写入文件内容

            fos.write(xmlFileBytes);

            fos.flush();

            // 关闭文件输入输出流

            fos.close();

            ReturnUploadImage rui &＃61; new ReturnUploadImage();

            rui.setTitle(xmlFilename);//这里需要设置文件名称如&＃xff1a;xxx.jpg

            rui.setOriginal(xmlFilename);//这里需要设置文件名称如&＃xff1a;xxx.jpg

            rui.setState("SUCCESS");

            rui.setUrl(basePath &＃43;relativePath&＃43;xmlFilename);

            JSONObject json &＃61; new JSONObject(rui);

            String result &＃61; json.toString();//这边就是为了返回给UEditor做的格式转换

            response.getWriter().write(result);

        } catch (Exception e) {

            e.printStackTrace();

        }

    }

优化后的代码&＃xff1a;

upload.jsp

<%&＃64; page language&＃61;"java" import&＃61;"java.util.*" pageEncoding&＃61;"utf-8"%>

<%&＃64; page contentType&＃61;"text/html;charset&＃61;utf-8"%>

<%&＃64; page import &＃61; "Xproer.*" %>

<%&＃64; page import&＃61;"org.apache.commons.lang.StringUtils" %>

<%&＃64; page import&＃61;"org.apache.commons.fileupload.*" %>

<%&＃64; page import&＃61;"org.apache.commons.fileupload.disk.*" %>

<%&＃64; page import&＃61;"org.apache.commons.fileupload.servlet.*" %>

<%out.clear();

/* 

    更新记录&＃xff1a;

        2013-01-25 取消对SmartUpload的使用&＃xff0c;改用commons-fileupload组件。因为测试发现SmartUpload有内存泄露的问题。

*/

//String path &＃61; request.getContextPath();

//String basePath &＃61; request.getScheme()&＃43;"://"&＃43;request.getServerName()&＃43;":"&＃43;request.getServerPort()&＃43;path&＃43;"/";

String uname &＃61; "";//        &＃61; request.getParameter("uid");

String upass &＃61; "";//        &＃61; request.getParameter("fid");

// Check that we have a file upload request

boolean isMultipart &＃61; ServletFileUpload.isMultipartContent(request);

FileItemFactory factory &＃61; new DiskFileItemFactory();  

ServletFileUpload upload &＃61; new ServletFileUpload(factory);

//upload.setSizeMax(262144);//256KB

List files &＃61; null;

try

{

    files &＃61; upload.parseRequest(request);

}

catch (FileUploadException e)

{// 处理文件尺寸过大异常 

    out.println("上传文件异常&＃xff1a;"&＃43;e.toString());

    return;

  

}

FileItem imgFile &＃61; null;

// 得到所有上传的文件

Iterator fileItr &＃61; files.iterator();

// 循环处理所有文件

while (fileItr.hasNext())

{

    // 得到当前文件

    imgFile &＃61; (FileItem) fileItr.next();

    // 忽略简单form字段而不是上传域的文件域(等)

    if(imgFile.isFormField())

    {

        String fn &＃61; imgFile.getFieldName();

        String fv &＃61; imgFile.getString();

        if(fn.equals("uname")) uname &＃61; fv;

        if(fn.equals("upass")) upass &＃61; fv;

    }

    else

    {

        break;

    }

}

Uploader up &＃61; new Uploader(pageContext,request);

up.SaveFile(imgFile);

String url &＃61; up.GetFilePathRel();

out.write(url);

response.setHeader("Content-Length",url.length()&＃43;"");//返回Content-length标记&＃xff0c;以便控件正确读取返回地址。

%>

剩下的后台功能和js参考下载文件中的UEditorAction 和 uploadForIE.js。

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

 

            com.baidu

            ueditor

            1.1.0

       

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

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

pom里引用了ueditor.jar

需要根据各自情况安装jar包

1.4.2中的jar包版本是1.1.0

mvn install:install-file -DgroupId&＃61;com.baidu -DartifactId&＃61;ueditor -Dversion&＃61;1.1.0 -Dpackaging&＃61;jar -Dfile&＃61;\ueditor\jsp\lib\ueditor-1.1.0.jar

运行

UeditorApplication的main方法

然后访问http://localhost:8088/ueditor/ 就可以测试了。

完成后的效果&＃xff1a;

图片自动批量上传&＃xff0c;不需要手动一张张选择图片上传&＃xff0c;用户体验比百度ueditor自带的更好&＃xff0c;传图效率更高。

上传成功后&＃xff0c;图片地址自动替换成服务器地址

图片自动保存在服务器中

详细资料可以参考这篇文章&＃xff1a;

Ueditor Word图片转存交互 – 泽优软件博客

讨论群&＃xff1a;223813913