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.