Summernote - 使用图片URL而非Base64

Question

Summernote所使用的所见即所得编辑器会将图像文件编码为Base64格式。虽然这似乎很方便，但我预计数据库会被长期大量使用，这可能会导致一些问题 - 搜索速度变慢、实施图像库等等...

我想知道它是否有一个选项可以关闭这个编码选项并改用“插入URL”方法。我一直在寻找，但还没有取得很大的成功。

例如，可以将图片存储方式更改为...

<img style="width: 640px;" src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAAUAAAABAAAAYgEbAAUAAAABAAAAagEoAAMAAAABAAIAAAExAAIAAAAeAAAAcgEyAAIAAAAUAAAAkIdp...............>

应该是这样的...

<img src="/images/blah/blah.jpg.">

有没有文档或者参考示例？

谢谢！

- Raccoon

---

你是将图片复制粘贴到字段中（而不是从URL创建图像）吗？ - chrki

不，每个人都会使用Summernote的图像插入功能添加图片。 - Raccoon

通过URL插入图像对我来说效果很好，它使用URL而不是base64字符串。如果您想使用普通URL使用上传功能，则必须为onImageUpload编写回调函数。 - chrki

用户必须将图像复制并粘贴到Summernote中，而不是使用插入图像菜单。使用插入图像按钮插入图像URL会得到你想要的结果，只有复制粘贴才会得到一个base64图像。 - Kevin Brown

我想我应该使用另一个所见即所得编辑器... 我会保留这篇文章，以便那些知道如何或曾经实现过它的人可以留下答案。 - Raccoon

Answer 1

你需要编写自定义函数来处理 onImageUpload()。

我正在寻找解决方案。找到了这个：Summernote 图片上传。

- Raghavendra N

Answer 2

我也遇到了一些应用程序的这个问题。我在这里创建了一个详细的教程 https://a1websitepro.com/store-image-uploads-on-server-with-summernote-not-base-64/。

您必须让Summernote知道您将使用函数处理图像文件。

    $(document).ready(function() {
    $("#summernote").summernote({
      placeholder: 'enter directions here...',
            height: 300,
            callbacks: {
            onImageUpload : function(files, editor, welEditable) {

         for(var i = files.length - 1; i >= 0; i--) {
                 sendFile(files[i], this);
        }
    }
}
});
});

然后创建另一个函数，用于回调。

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

然后，您需要创建一个PHP文件来处理请求。请注意，此脚本的PHP文件名为editor-upload.php。

- user2970934