Summernote显示已上载到文件夹的图像

Question

我正在使用非常好的Summernote Editor进行一些小型webapp。 我没有使用图像的默认内联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参数调用回调。 这意味着编辑器不可用。

您可以插入图像：

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

在你的情况下：

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

Answer 2

我使用codeigniter做到这一点可能对某人有所帮助。

  $(function() { $('.summernote').summernote({ onImageUpload: function(files, editor, $editable) { sendFile(files[0],editor,$editable); } }); function sendFile(file,editor,welEditable) { data = new FormData(); data.append("file", file); $.ajax({ url: "http://localhost/fourm/media/editorupload", data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ editor.insertImage(welEditable, data); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus+" "+errorThrown); } }); } }); 

Answer 3

您必须使用“callbacks：{}”方法。 像这样：

$('.summernote').summernote({
    height: 500,
    tabsize: 4,
    callbacks: {
        onImageUpload: function(files, editor, $editable) {
            console.log('onImageUpload');
            sendFile(files[0],editor,$editable);
        }
    }});