Isu memuat naik dan memaparkan imej yang disalin terus ke editor Summernote

Question

Saya menghadapi masalah memuat naik imej yang disalin terus ke editor Summernote tanpa menggunakan butang imej. Berikut ialah gambaran ringkas tentang masalah dan langkah yang telah saya ambil setakat ini:

1. Saya telah menyepadukan Summernote ke dalam aplikasi web saya dan mendayakan fungsi tampal untuk membolehkan pengguna menyalin dan menampal imej terus ke dalam editor.

2. Selepas menampal imej, ia ditunjukkan sebagai imej yang tidak diketahui dalam editor.

3. Namun, apabila memuat naik imej menggunakan AJAX dan menyimpannya pada pelayan, apabila saya mendapatkan semula imej dari pelayan dan cuba memaparkannya dalam editor Summernote, imej itu tidak dipaparkan dengan betul. Sebaliknya, ia muncul sebagai imej yang tidak diketahui atau fail dengan aksara yang bercelaru. Seperti ini:

Berikut ialah butiran kod saya:

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

Saya akan berterima kasih jika anda boleh memberikan bimbingan atau nasihat tentang cara untuk menyelesaikan masalah ini.

Answer 1

Saya menyelesaikan masalah dengan membuat pengubahsuaian berikut:

• Dalam fail "editor-upload.php", saya menggantikan $_SERVER['REQUEST_SCHEME'] 与 $_SERVER['HTTP_HOST'] tiba Bina URL imej dengan betul.

• Saya mengubah suai kod JavaScript seperti berikut:

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

• Saya mengemas kini kod JavaScript untuk mengendalikan muat naik imej Editor nota musim panas. Apabila imej dipanggil, fungsi sendFile dipanggil Selepas memuat naik, gunakan AJAX untuk menghantar fail ke pelayan. tindak balas Kemudian masukkan kandungan daripada pelayan yang mengandungi URL imej ke dalam Editor menggunakan kaedah insertImage.

• Saya mengalami isu perkaitan fail FTP di mana imej Buka dalam penyunting teks. Untuk menyelesaikan masalah ini saya melaraskan fail Tetapan persatuan dalam FileZilla memautkan fail imej ke Pemapar imej atau aplikasi yang sesuai.

Dengan pengubahsuaian ini, saya berjaya memuat naik dan memaparkan imej yang disalin terus ke editor Summernote.