多个 Summernote 实例 - 将图像上传到服务器答案

【问题标题】：Multiple Summernote instances - upload images to server多个 Summernote 实例 - 将图像上传到服务器
【发布时间】：2020-07-12 05:41:10
【问题描述】：

所以我正在使用带有 symfony 表单的 Summernote 编辑器，并且我设法将我的图像上传到服务器，而没有将它们保存为 base64 格式。另一个问题来了，我有两个 Summernote 编辑器，当我在第二个中上传图片时，它被插入到第一个中。我尝试使用 jQuery 的 each() 循环，但没有成功。问题出在上传功能上，没有它可以正常工作，但我需要将图像上传到服务器。这是我的代码：

$(document).ready(function () {
        $('.editor').summernote({
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0]);
                }
            }
        });

function sendFile(img) {
    var formData = new FormData();
    formData.append("img", img);
    $.ajax({
        data: formData,
        type: "POST",
        url: "/admin/upload-editor",
        cache: false,
        contentType: false,
        processData: false,
        success: function (url) {
            $('.editor').summernote('insertImage', url);
        }
    });
}
});

【问题讨论】：

标签： javascript summernote

【解决方案1】：

编辑： 我之前的循环逻辑是错误的，所以我传递了一个键来迭代每个编辑器。

$(document).ready(function () {
    $('.editor').each(function (i) {
            $('.editor').eq(i).summernote({
                callbacks: {
                    onImageUpload: function (files) {
                        sendFile(files[0], i);
                    }
                }
            });
        }
    );

    function sendFile(img, i) {
        var formData = new FormData();
        formData.append("img", img);
        $.ajax({
            data: formData,
            type: "POST",
            url: "/admin/upload-editor",
            cache: false,
            contentType: false,
            processData: false,
            success: function (url) {
                $('.editor').eq(i).summernote('insertImage', url);
            }
        });
    }
});

【讨论】：