Hướng dẫn thêm Summernote plugin insert files trong toolbar và hàm callback

Include file js phía dưới phần include summer note

<script type="text/javascript" src="summernote-file.js"></script>

Thêm button insert vào summer note

$('.summernote').summernote({
    toolbar:[
        ['insert', ['link', 'picture', 'video', 'file']],
    ],
});

Thường các file insert vào sẽ ở dạng base64 để xử lý vấn đề này các bạn gọi hàm onFileUpload

$('.summernote').summernote({
    //Your classic summernote code here

    //Define the callback
    callbacks: {
        onFileUpload: function(file) {
            //Your own code goes here
        },
    },
});

Ví dụ gọi hàm Callback để upload file

$('.summernote').summernote({
    //Your classic summernote code here
    
    //Define the callback
    callbacks: {
        onFileUpload: function(file) {
            myOwnCallBack(file[0]);
        },
    },
});

function myOwnCallBack(file) {
    let data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        url: "file-uploader.php", //Your own back-end uploader
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() { //Handle progress upload
            let myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            return myXhr;
        },
        success: function(reponse) {
            if(reponse.status === true) {
                let listMimeImg = ['image/png', 'image/jpeg', 'image/webp', 'image/gif', 'image/svg'];
                let listMimeAudio = ['audio/mpeg', 'audio/ogg'];
                let listMimeVideo = ['video/mpeg', 'video/mp4', 'video/webm'];
                let elem;

                if (listMimeImg.indexOf(file.type) > -1) {
                    //Picture
                    $('.summernote').summernote('editor.insertImage', reponse.filename);
                } else if (listMimeAudio.indexOf(file.type) > -1) {
                    //Audio
                    elem = document.createElement("audio");
                    elem.setAttribute("src", reponse.filename);
                    elem.setAttribute("controls", "controls");
                    elem.setAttribute("preload", "metadata");
                    $('.summernote').summernote('editor.insertNode', elem);
                } else if (listMimeVideo.indexOf(file.type) > -1) {
                    //Video
                    elem = document.createElement("video");
                    elem.setAttribute("src", reponse.filename);
                    elem.setAttribute("controls", "controls");
                    elem.setAttribute("preload", "metadata");
                    $('.summernote').summernote('editor.insertNode', elem);
                } else {
                    //Other file type
                    elem = document.createElement("a");
                    let linkText = document.createTextNode(file.name);
                    elem.appendChild(linkText);
                    elem.title = file.name;
                    elem.href = reponse.filename;
                    $('.summernote').summernote('editor.insertNode', elem);
                }
            }
        }
    });
}

function progressHandlingFunction(e) {
    if (e.lengthComputable) {
        //Log current progress
        console.log((e.loaded / e.total * 100) + '%');

        //Reset progress on complete
        if (e.loaded === e.total) {
            console.log("Upload finished.");
        }
    }
}

Link download file summernote-file

Chúc các bạn thành công