如何使用summernote将文本放在图像上

<div id="editor"></div>
<img id="image" src="path/to/image.jpg" alt="Image">

$(document).ready(function() {
  $('#editor').summernote({
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['insert', ['link', 'picture', 'video']],
      ['misc', ['codeview']]
    ],
    callbacks: {
      onImageUpload: function(files) {
        // 处理图像上传逻辑
        uploadImage(files[0]);
      }
    }
  });
});

function uploadImage(file) {
  var formData = new FormData();
  formData.append('image', file);

  $.ajax({
    url: 'upload.php', // 替换为你的图像上传处理URL
    method: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      var imageUrl = response.url; // 从服务器返回的响应中获取图像URL
      insertImage(imageUrl);
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
}

function insertImage(imageUrl) {
  var imgElement = '<img src="' + imageUrl + '" alt="Image">';
  $('#editor').summernote('editor.insertImage', imgElement);
}