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

Question

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

我让那部分按预期工作。我可以单击 "image" 图标和 select 图像，它会以原始类型（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');

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);
        }
    }});

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

Summernote Show Images that have been uploaded to a folder

image

summernote