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

Summernote显示已上传到文件夹

3 个答案: