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

Question

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

1. 我已将 Summernote 集成到我的 Web 应用程序中，并启用了粘贴功能，以允许用户将图像直接复制并粘贴到编辑器中。

2. 粘贴图像后，它在编辑器中显示为未知图像。

3. 但是，在使用 AJAX 上传图像并将其保存在服务器上时，当我从服务器检索图像并尝试在 Summernote 编辑器中显示它时，图像无法正确显示。相反，它显示为未知图像或带有乱码的文件。像这样：

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

“index.html”：

<form action="" method="post">
              <h1>Upload Images With Summernote</h1>
              <p>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.</p>
              
                <textarea name="entry" id="summernote" cols="30" rows="20"></textarea>
                <input type="submit" value="submit" class="btn btn-lg btn-success" name="submit">

          </form>

 <script>
  $(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

        // Create an <img> element with the image URL
        var imgElement = $("<img>").attr("src", imageUrl);

        // Insert the <img> element into the editor
        editor.summernote("pasteHTML", imgElement[0].outerHTML);
      },
      error: function(xhr, status, error) {
        alert("Error occurred while uploading the image.");
      }
    });
  }
</script>

“编辑器-upload.php：”

<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if (isset($_FILES['file']['name'])) {
    if (!$_FILES['file']['error']) {
        $name = rand(100, 1000) . '_' . date('Ymd');
        $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
        $filename = $name . '.' . $ext;
        $destination = '../testimage/' . $filename; // Change this directory
        $location = $_FILES["file"]["tmp_name"];
        if (move_uploaded_file($location, $destination)) {
            $url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $destination;

            echo $url;
        } else {
            echo 'Error occurred while moving the uploaded file.';
        }
    } else {
        echo 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error'];
    }
} else {
    echo 'No file was uploaded.';
}
?>

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

Answer 1

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

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

• 我修改了 JavaScript 代码如下：

  $(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.");
       }
   });
  }

• 我更新了 JavaScript 代码来处理图像上传 夏日笔记编辑器。当图像被调用时，sendFile 函数被调用 上传后，使用 AJAX 将文件发送到服务器。响应 然后将来自服务器的包含图像 URL 的内容插入到 使用 insertImage 方法的编辑器。

• 我遇到了 FTP 文件关联问题，其中图像 在文本编辑器中打开。为了解决这个问题，我调整了文件 FileZilla 中的关联设置将图像文件与 图像查看器或适当的应用程序。

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