拋棄百度UMEditor，擁抱summernote （解決上傳文件又慢又卡的問題）

由於一些項目上的原因以及相關因素，我們使用其他富文本編輯器替代了UMEditor

本來用CKEditor，但是團隊覺得使用起來很不順手，尤其圖片上傳十分不爽，功能復雜但是使用起來比較麻煩

后來我們又替換了summernote，這款編輯器名氣沒有ck大，但是簡介直觀，而且風格和項目很匹配，最終決定使用這款

這是github地址，先下載

https://github.com/summernote/summernote

然后在文件中引入css以及js，注意要使用國際化文件則引入語言包，不然默認顯示英文

<!-- include 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);  
                }  
            }  
        })
    });

需要注意的是，默認上傳是需要修改的，不然會以二進制的文件形式，性能受影響

function sendFile(files, editor, $editable) {  
        
        var size = files[0].size;
        if((size / 1024 / 1024) > 2) {
            alert("圖片大小不能超過2M...");
            return false;
        }
        
        var data = new FormData();  
        data.append("ajaxTaskFile", files[0]);  
        
        var hdnContextPath = $("#hdnContextPath").val();
        
        $.ajax({  
            data : data,  
            type : "POST",  
            url : hdnContextPath + "/file/upload.action",    // 圖片上傳出來的url，返回的是圖片上傳后的路徑，http格式  
            cache : false,  
            contentType : false,  
            processData : false,  
            dataType : "json",  
            success: function(data) {//data是返回的hash,key之類的值，key是定義的文件名  
            
                $.each(data.data, function (index, file) {
                    $('#summernote').summernote('insertImage', file.url);  
                }); 
                
            },  
            error:function(){  
                alert("上傳失敗");  
            }  
        });  
    }  

后台代碼就不放出了，之前講過多次了，參照一下即可

最終需要注意的是，這個上傳文件有個bug，就是選擇文件的時候彈出框很慢，十分不爽，找到如下兩個文件修改其中代碼即可