Problèmes de téléchargement et d'affichage des images copiées directement dans l'éditeur Summernote

Question

J'ai du mal à télécharger des images copiées directement dans l'éditeur Summernote sans utiliser le bouton image. Voici un bref aperçu du problème et des mesures que j'ai prises jusqu'à présent :

1. J'ai intégré Summernote dans mon application Web et activé la fonctionnalité de collage pour permettre aux utilisateurs de copier et coller des images directement dans l'éditeur.

2. Après avoir collé l'image, elle apparaît comme image inconnue dans l'éditeur.

3. Cependant, lors du téléchargement de l'image à l'aide d'AJAX et de son enregistrement sur le serveur, lorsque je récupère l'image du serveur et que j'essaie de l'afficher dans l'éditeur Summernote, l'image ne s'affiche pas correctement. Au lieu de cela, il apparaît comme une image inconnue ou un fichier avec des caractères tronqués. Comme ça :

Voici le détail de mon code :

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

Je vous serais reconnaissant si vous pouviez nous fournir des conseils ou des conseils sur la façon de résoudre ce problème.

Answer 1

J'ai résolu le problème en apportant les modifications suivantes :

• Dans le fichier "editor-upload.php", j'ai remplacé $_SERVER['REQUEST_SCHEME'] 与 $_SERVER['HTTP_HOST'] arriver Construisez correctement l’URL de l’image.

• J'ai modifié le code JavaScript comme suit :

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

• J'ai mis à jour le code JavaScript pour gérer les téléchargements d'images Éditeur de notes d'été. Lorsque l'image est appelée, la fonction sendFile est appelée Après le téléchargement, utilisez AJAX pour envoyer le fichier au serveur. réponse Insérez ensuite le contenu du serveur contenant l'URL de l'image dans Éditeur utilisant la méthode insertImage.

• Je rencontre un problème d'association de fichiers FTP où l'image Ouvrir dans un éditeur de texte. Pour résoudre ce problème, j'ai ajusté le fichier Les paramètres d'association dans FileZilla lient les fichiers image à Visionneuse d’images ou application appropriée.

Grâce à ces modifications, j'ai pu télécharger et afficher avec succès des images copiées directement dans l'éditeur Summernote.