上傳和顯示直接複製到 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 編輯器中的圖像。