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

Posted 2023-03-22

【中文标题】Summernote 显示已上传到文件夹的图像

【英文标题】：Summernote Show Images that have been uploaded to a folder

【发布时间】：2015-08-15 05:34:39

【问题描述】：

我正在使用非常棒的 Summernote 编辑器来开发一个小型 web 应用程序。 我将图像存储在一个文件夹中，而不是对图像使用默认的内联 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 编辑器不会在编辑器中显示已保存（存储）的图像的任何想法？

谢谢

【参考方案1】：

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

您可以插入图片：

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

在你的情况下：

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

【讨论】：

好吧，现在我很困惑。你是说在最新版本的 Summernote 中，我不需要使用 php 使用 sendFile 函数发送图像，就像上面的例子一样？您提供的 js 行看起来应该可以解决问题，但应该在哪里使用？

我说你应该替换行 editor.insertImage(welEditable, data); with $('.summernote').summernote("insertImage", data, 'filename');

啊……好吧，我现在明白了。它确实将它返回给编辑器，尽管我似乎在某处关闭了图像的路径，因为当保存它时链接到不同的文件夹，但这只是我需要排序的东西。感谢您的帮助！

其实我的 onImageUpload 没有触发..在新版本中是不是贬值了？

【参考方案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);
              
            );
           
    );

【参考方案3】：

您必须使用“回调：”方法。像这样：

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