百度编辑器ueditor增加自定义工具栏暨百度编辑器上传word文档并保留源格式自动填充到编辑框

需求：百度编辑器上增加一个按钮，上传word文档并自动添加内容到编辑框

思路：1，百度编辑器增加上传按钮；2，解析word文档，返回富文本；3，插入富文本到编辑框

第一，百度编辑器增加自定义按钮

1. ueditor.config.js这个配置文件里，toolbars数组增加自定义按钮的标识，自己取的名字
   
   我这里加了一个wordimport
   此处有坑，用wordimport可以，用wordImport不行，鼠标悬停不提示，功能用不了，仔细观察默认的，发现都是小写，没有一个大写字母，看来这里工具栏的标识不支持大写字母【我用的版本是1.4.3.1】

2. ueditor.config.js文件中labelMap加上鼠标悬停的提示语，注意，labelMap默认是注释掉的，鼠标悬停默认读的是zh-cn.js文件中的labelMap
   
   

3. 设置工具栏上显示的小图标，ueditor.css样式文件中加按钮图标路径
   

4. 配置显示按钮，注意：很关键，不配置不显示，ueditor.all.js文件中btnCmds数组配置上前面自定义的标识wordimport
   

5. 给按钮配置上事件，在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做了一个导入过程中的加载遮罩效果，具体上面的代码中都有。