image - Summernote 显示已上传到文件夹的图像

Question

我正在使用非常好的 Summernote Editor 来开发一个小网络应用程序。我没有对图像使用默认的内联 base64 代码，而是将图像存储在一个文件夹中。

我让那部分按预期工作。我可以单击“图像”图标并选择一个图像，它会以原始类型(jpg、png、gif)将其上传到我服务器上的一个文件夹中。

问题是，即使图像已正确上传，Summernote 也不会将其添加到编辑器中……所以它不会显示。

这是我正在使用的相关代码:

    $(function() {
     $('.summernote').summernote({
      lang: 'en-EN',
      height: 500,
      onImageUpload: function(files, editor, $editable) {
      sendFile(files[0],editor,$editable);
      }  

    });
    function sendFile(file,editor,welEditable) {
      data = new FormData();
      data.append("file", file);
       $.ajax({
       url: "uploader.php",
       data: data,
       cache: false,
       contentType: false,
       processData: false,
       type: 'POST',
       success: function(data){
       alert(data);
        editor.insertImage(welEditable, data);
    },
       error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus+" "+errorThrown);
      }
    });
   }

  });

uploader.php 文件如下所示:

<?php
  // A list of permitted file extensions
    $allowed = array('png', 'jpg', 'gif','zip');

if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){

$extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

if(!in_array(strtolower($extension), $allowed)){
    echo '{"status":"error"}';
    exit;
}

    if(move_uploaded_file($_FILES['file']['tmp_name'],
    'images/'.$_FILES['file']['name'])){
    $tmp='images/'.$_FILES['file']['name'];
    echo 'images/'.$_FILES['file']['name'];
    //echo '{"status":"success"}';
    exit;
    }
   }

echo '{"status":"error"}';
exit;
?>

关于 Summernote 编辑器为什么不在编辑器中显示保存(存储)的图像有什么想法吗？

谢谢

Answer 1

在新版本的 summernote 中，onImageUpload 回调仅使用 files 参数调用。这意味着 editor 不可用。

您可以插入一张图片:

$('.summernote').summernote("insertImage", url, filename);

在你的情况下:

$('.summernote').summernote("insertImage", data, 'filename');