如何使用summernote通过ajax同时传递内容和图片

Posted 2023-03-22

【中文标题】如何使用summernote通过ajax同时传递内容和图片

【英文标题】：How to use summernote to pass content and images at same time via ajax

【发布时间】：2019-05-16 16:10:39

【问题描述】：

我正在尝试创建一个 wp 类型的文本编辑器来上传帖子的图像和内容。所以我用summernote作为文本编辑器。

我想要实现的是，我想同时发送帖子内容，即文本内容和附加到帖子的媒体。这样我就可以同时处理它。

以下是我的 html 代码。

<textarea name="post_content" id="post_content" class="form-control round post_content"></textarea>

我正在使用以下 jQuery 代码：

$('#post_content').summernote(
                
                    height: 300,
                    placeholder: "Type Your Post Content...",
                    toolbar: [
                                ['style', ['style']],
                                ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
                                ['fontname', ['fontname']],
                                ['fontsize', ['fontsize']],
                                ['color', ['color']],
                                ['para', ['ul', 'ol', 'paragraph']],
                                ['height', ['height']],
                                ['table', ['table']],
                                ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
                                ['view', ['fullscreen', 'codeview']]
                                // ['help', ['help']]
                            ],
                    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: '/image-upload.php',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(url) 
                            $(el).summernote('editor.insertImage', url);
                        
                    );
                

当前代码的问题在于它将图像直接上传到服务器。我想通过单击按钮同时发送图像和内容，以便我可以将文本代码存储在 DB 中并取出图像，以各种大小处理它们并将其存储在 DB 中。

但我无法弄清楚我该如何实现它。

【问题讨论】：

关于summernote的工作原理，如果您使用('editor.insertImage', url)，它希望在该网址下找到图像，这就是为什么直接发送上传并且非常有意义，为什么不处理图像中的图像-upload.php ?

我希望在单击发布按钮时立即发送内容和图像。这样我就可以处理它了。

仍然，我认为将图像存储在数据库中也不正确，为什么不尝试实现 wordrpress mediathek？您只是不应该使用 Summernote 功能，而是在表单中包含您自己的文件输入。

有没有演示教程来创建或实现它？

您可以在插入或上传之前对图像进行base64编码。

【参考方案1】：

作为@cloudformatter 的一部分，有一个嵌入LocalImages 的选项。这本质上是使用 jQuery 获取一些内容，查找所有图像，将它们放在画布上，将它们作为 base64 编码数据进行抓取，然后将图像 URL 替换为 base64 编码数据。这只是为了嵌入该项目中的本地图像（意味着您在本地主机中运行），因为它会发送远程数据以进行格式化，当然，远程格式化程序不知道“http://localhost/myimage.jpg”在哪里。

您可以在http://www.cloudformatter.com/CSS2PDF代码中找到它，相关部分在这里为您发布。您可以采用类似的方法将所有图像替换为 base64 等价物，因为这样数据将是内联的。

当然，您是长期存储的，这意味着如果图像在某个 http:// 位置发生更改，它们将不会更新。您可以添加类似 data-url 属性的内容来存储原始 URL，如果您将数据带回更新，并使用该 URL 替换 base64 编码数据。

embedLocalImages: function(dest) 
    jQuery(dest).find('img').each(function(index) 
        var img = this;
        var imageUrl = img.src;
        if (imageUrl.indexOf(xepOnline.Formatter.getBase()) != -1)
             var canvas = document.createElement('canvas');
             var ctx = canvas.getContext('2d');
             canvas.height = img.height;
             canvas.width = img.width;
             ctx.drawImage(img,0,0, img.width, img.height);
             var dataURL = canvas.toDataURL();
             jQuery(img).attr('src', dataURL);
            canvas = null;
        
    );
,