遇到summernote編輯器的坑,解決上傳圖片性能問題。


1、遇到最大的坑是,引用summernote.js和summernote.min.js的坑,因為調用不同的js,寫的方法完全不同,所以經常會造成報錯和方法無效的情況,以下是我通過實際開發環境總結的:

 

 2、上傳圖片的坑,編輯器默認會把圖片轉換為二進制,性能會有很大的問題,解決辦法如下:

先寫一個異步上傳圖片的方法:

function sendFile(files,editor,welEditable) {
        var data = new FormData();
        data.append("fileObj", files[0]);
        data.append("type", "img");

        $.ajax({
            data : data,
            type : "POST",
            url : ctx + "sys/file/util/upload",    // 圖片上傳出來的url,返回的是圖片上傳后的路徑,http格式
            cache : false,
            contentType : false,
            processData : false,
            //dataType : "json",
            success: function(data) {//data是返回的hash,key之類的值,key是定義的文件名
                $('.summernote').summernote('insertImage', data.fileService + data.imgUrl);
            },
            error:function(){
                alert("上傳失敗");
            }
        });
    }

然后在初始化編輯器的時候寫上傳圖片回調方法,這里因為引用summernote.js和summernote.min.js寫法不同。

1)引用summernote.js的寫法:

$('.summernote').summernote({
        height : '220px',
        lang : 'zh-CN',
        callbacks:{//回調函數,重寫onImageUpload方法,用於圖片上傳
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files,editor,welEditable);
            }
        }
    });

2)引用summernote.min.js的寫法:

$('.summernote').summernote({
        height : '220px',
        lang : 'zh-CN',
        onImageUpload: function(files, editor, welEditable) {//圖片上傳
            sendFile(files,editor,welEditable);
        }
    });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM