上传和显示直接复制到 Summernote 编辑器中的图像时出现问题-PHP中文网问答

我在上传直接复制到 Summernote 编辑器而不使用图像按钮的图像时遇到问题。以下是问题的简要概述以及我迄今为止采取的步骤：

我已将 Summernote 集成到我的 Web 应用程序中，并启用了粘贴功能，以允许用户将图像直接复制并粘贴到编辑器中。
粘贴图像后，它在编辑器中显示为未知图像。
但是，在使用 AJAX 上传图像并将其保存在服务器上时，当我从服务器检索图像并尝试在 Summernote 编辑器中显示它时，图像无法正确显示。相反，它显示为未知图像或带有乱码的文件。像这样：

这是我的代码的详细信息：

“index.html”：


              Upload Images With Summernote
              When you upload an image with summernote the default is to put it in the database with base 64 encoding. This will bloat your databases. In this tutorial you will upload an image to a folder then store the in your database.

“编辑器-upload.php：”

如果您能提供有关如何解决此问题的指导或建议，我将不胜感激。

$(document).ready(function() { var editor = $("#summernote"); editor.summernote({ spellCheck: true, toolbar: [ ['style', ['style']], ['font', ['bold', 'underline', 'italic']], ['insert', ['link', 'picture']], ], height: 300, callbacks: { onImageUpload: function(files) { sendFile(files[0], editor); console.log(files[0]); } } }); }); function sendFile(file, editor) { var data = new FormData(); data.append("file", file); $.ajax({ data: data, type: "POST", url: "editor-upload.php", cache: false, contentType: false, processData: false, success: function(response) { var imageUrl = response.trim(); // Trim any leading/trailing whitespace // Insert the image into the editor editor.summernote('insertImage', imageUrl); console.log(response); }, error: function(xhr, status, error) { alert("Error occurred while uploading the image."); } }); }

全部回复(1)

P粉5471709722024-03-22 10:43:20 1楼

我通过进行以下修改解决了该问题：

在“editor-upload.php”文件中，我替换了 $_SERVER['REQUEST_SCHEME'] 与 $_SERVER['HTTP_HOST'] 到正确构造图像 URL。

我修改了 JavaScript 代码如下：

我更新了 JavaScript 代码来处理图像上传夏日笔记编辑器。当图像被调用时，sendFile 函数被调用上传后，使用 AJAX 将文件发送到服务器。响应然后将来自服务器的包含图像 URL 的内容插入到使用 insertImage 方法的编辑器。
我遇到了 FTP 文件关联问题，其中图像在文本编辑器中打开。为了解决这个问题，我调整了文件 FileZilla 中的关联设置将图像文件与图像查看器或适当的应用程序。

通过这些修改，我能够成功上传并显示直接复制到 Summernote 编辑器中的图像。

赞 +0

添加回复