Probleme beim Hochladen und Anzeigen von Bildern, die direkt in den Summernote-Editor kopiert wurden

Question

Ich habe Probleme beim Hochladen von Bildern, die direkt in den Summernote-Editor kopiert wurden, ohne die Bildschaltfläche zu verwenden. Hier ein kurzer Überblick über das Problem und die Schritte, die ich bisher unternommen habe:

1. Ich habe Summernote in meine Webanwendung integriert und die Einfügefunktion aktiviert, damit Benutzer Bilder direkt kopieren und in den Editor einfügen können.

2. Nach dem Einfügen des Bildes wird es im Editor als unbekanntes Bild angezeigt.

3. Wenn ich jedoch das Bild mit AJAX hochlade und auf dem Server speichere, wenn ich das Bild vom Server abrufe und versuche, es im Summernote-Editor anzuzeigen, wird das Bild nicht korrekt angezeigt. Stattdessen erscheint es als unbekanntes Bild oder als Datei mit verstümmelten Zeichen. So:

Hier sind die Details meines Codes:

"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>

"Editor-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.';
}
?>

Ich wäre Ihnen dankbar, wenn Sie uns Hinweise oder Ratschläge zur Lösung dieses Problems geben könnten.

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 编辑器中的图像。