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

标签: 百度编辑器自定义工具栏  百度编辑器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做了一个导入过程中的加载遮罩效果,具体上面的代码中都有。

版权声明:本文为hehuihh原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hehuihh/article/details/107334300