Summernote显示已上载到文件夹的图像 [英] Summernote Show Images that have been uploaded to a folder

问题描述

我正在使用非常好的Summernote Editor进行一些小型webapp。
而不是使用图像的默认内联base64代码，我将图像存储在一个文件夹中。

I am using the really nice Summernote Editor for a little webapp. Instead of using the default inline base64 code for images I am storing the images in a folder.

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

I have that part working as intended. I am able to click the "image" icon and select an image and it will upload it to a folder on my server in its original type (jpg, png, gif).

问题在于，即使图像被正确上传，Summernote也不会将其添加到编辑器中...因此它不显示。

The problem is that even though the image gets uploaded properly, Summernote does not add it to the editor ... so it doesn't show.

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

Here is the relevant code I am using:

    $(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文件如下所示：

The uploader.php file looks like this:

<?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编辑器不会在编辑器中显示已保存（存储）的图像？

Any ideas as to why the Summernote editor will not show the saved (stored) images in the editor?

谢谢

推荐答案

在新版本的summernote onImageUpload中，回调是仅使用文件参数调用。这意味着编辑器不可用。

In the new version of summernote onImageUpload callback is called only with files argument. It means that editor is not available.

您可以插入图片：

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

在您的情况下：

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

这篇关于Summernote显示已上载到文件夹的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！