抛弃百度UMEditor，拥抱summernote （解决上传文件又慢又卡的问题）

小灰灰 2021-04-23 15:02 427阅读 0赞

由于一些项目上的原因以及相关因素，我们使用其他富文本编辑器替代了UMEditor

本来用CKEditor，但是团队觉得使用起来很不顺手，尤其图片上传十分不爽，功能复杂但是使用起来比较麻烦

后来我们又替换了summernote，这款编辑器名气没有ck大，但是简介直观，而且风格和项目很匹配，最终决定使用这款

![img_352bf47b4db87e2cec2913ec6e496a38.png][]

这是github地址，先下载

[https://github.com/summernote/summernote][https_github.com_summernote_summernote]

然后在文件中引入css以及js，注意要使用国际化文件则引入语言包，不然默认显示英文

<link href="<%=request.getContextPath() %>/static/global/plugins/summernote/dist/summernote.css" rel="stylesheet">
        <script src="<%=request.getContextPath() %>/static/global/plugins/summernote/dist/summernote.js"></script>
        <script src="<%=request.getContextPath() %>/static/global/plugins/summernote/lang/summernote-zh-CN.js"></script>

在html中加入编辑器

<div>
        <div id="summernote" style="height: 300px;">Hello Summernote</div>
    </div>

最后初始化

$(document).ready(function() {
            $("#summernote").summernote({
                lang : "zh-CN",
                height: 150,
                callbacks: {  
                    onImageUpload: function(files, editor, $editable) {  
                        sendFile(files);  
                    }  
                }  
            })
        });

需要注意的是，默认上传是需要修改的，不然会以二进制的文件形式，性能受影响

后台代码就不放出了，之前讲过多次了，参照一下即可

最终需要注意的是，这个上传文件有个bug，就是选择文件的时候弹出框很慢，十分不爽，找到如下两个文件修改其中代码即可

![img_634c2e9911d0271a984d291aa9b4e90e.png][]

[img_352bf47b4db87e2cec2913ec6e496a38.png]: /images/20210423/1619190117705.png
[https_github.com_summernote_summernote]: https://github.com/summernote/summernote
[img_634c2e9911d0271a984d291aa9b4e90e.png]: /images/20210423/1619190096964.png