从URL上传的Summernote图像

我在我的网站上使用了summernote html文本编辑器。当用户将图像URL放入图像URL区域时，我想将图像下载到我的服务器，然后按插入图像按钮。从URL上传的Summernote图像

目前summernote仅获取src属性的图片来源。我想将图像存储在我自己的Amazon S3 Bucket或VPS上。

有许多关于summernote图片上传的文档，但所有这些文件都是从pc上传而不是从URL上传。

如何覆盖此功能？

图像对话框

2017-02-26 hakiko

通过ajax调用等方式将URL传递到服务器，然后使用服务器端技术（看起来像上面的标记中的php）下载，然后发送到Amazon S3--尽管您可能会直接从使用Amazon S3 REST API的浏览器到Amazon S3，http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html –

使用Ckeditor更好。 – 2017-03-13 22:55:39

用ckeditor上传图片https://github.com/fxstar/CKeditorUpload – 2017-03-13 23:04:26

如此以来，你是不是能够读取跨域图像dataUrl在您的客户端脚本的决定是从图片URL区域获取URL，并将其发送到你的后端。在那里你可以使用一个简单的PHP脚本来下载图像。

该示例包括客户端和后端代码。两个测试。所有你需要的是把这两个脚本放到你的Web服务器的目录中，然后试一试。

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Summernote</title> 
     <!-- include libraries(jQuery, bootstrap) --> 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

     <!-- include summernote css/js--> 
     <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> 
    </head> 
    <body> 
     <div id="summernote">Hello Summernote</div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#summernote').summernote(); 
       $('button[data-original-title="Picture"]').click(function(){ 
        // Set handler on Inset Image button when dialog window is opened 
        $('.modal-dialog .note-image-btn').one('click', function(e) { 
         // Get Image URL area 
         var imageUrl = $('.modal-dialog .note-image-url').val(); 
         // Send it to your backend 
         $.ajax({ 
          url: "image_loader.php", 
          data: "url="+imageUrl, 
          type: "POST", 
          dataType: 'json' 
         }).success(function(data) { 
          if (typeof data[0] === 'string') { 
           $('img[src="'+imageUrl+'"]').attr('src', data); 
          } else { 
           // What to do if image downloading failed 
           window.alert('oops'); 
          } 
         }).error(function() { 
          // What to do if ajax request failed 
          window.alert('oops'); 
         }); 
        }); 
       }); 
      }); 
     </script> 
    </body> 
</html>

image_loader.php

<?php 
if ($_POST['url']) { 
    // Here you'd better put some logic to check that $_POST['url'] is a correct url before use it 
    $image = file_get_contents($_POST['url']); 

    if ($image) { 
     // Put downloaded image on your server 
     $file = fopen('imagename.jpeg', 'w'); 
     fwrite($file, $image); 
     fclose($file); 
    } 

    /** 
    * Now your code needs to echo one of the following: 
    * string Url of an uploaded image on your server 
    * bool False if it failed 
    * 
    * To avoid bool to string conversion during output response needs to be sent as JSON 
    */ 
    $response = ($image) ? array('/PATH_TO_IMAGE_DIRECTORY_IF_NEEDED/imagename.jpeg') : array(false); 
    echo json_encode($response); 
}

例如与此图像https://imgsnap.com/images/2015/02/23/abstract_0005.jpg

UPDATE（您关于IMG造型评论）

将下面一行放入summernote.js中，以便在编辑器处理图像URL时触发特殊事件。

$(document).trigger('imageUrlInserted', src);

（根据我的版本的文件）之前

$image.css('width', Math.min($editable.width(), $image.width()));

把它放在行4095 insertImage()方法的内部现在的index.php

$('.modal-dialog .note-image-btn').one('click', function(e) { 
... 

... 
});

内更换所有的代码与此

// Get Image URL area 
var imageUrl = $('.modal-dialog .note-image-url').val(); 
// Send it to your backend after the image been handled by the editor 
$(document).on('imageUrlInserted', function(e, sourceUrl) { 
    if (sourceUrl === imageUrl) { 
     $.ajax({ 
      url: "image_loader.php", 
      data: "url="+imageUrl, 
      type: "POST", 
      dataType: 'json' 
     }).success(function(data) { 
      if (typeof data[0] === 'string') { 
       $('img[src="'+imageUrl+'"]').attr('src', data).removeAttr('style'); 
      } else { 
       // What to do if image downloading failed 
       window.alert('oops'); 
      } 
     }).error(function() { 
      // What to do if ajax request failed 
      window.alert('oops'); 
     }); 
    } 
});

来源

2017-03-09 22:21:06

“它会将此图像添加到summernote编辑器的当前内容区域吗？” - 是的，因为它不会改变summernote的逻辑。只需将两个附加处理程序附加到它的节点上。 –

如何将summernote的img src =“”值更改为上传图片的路径。现在有了这个解决方案，我可以下载镜像到服务器，但是summernote的src路径仍然有原始的远程URL – hakiko

从URL上传的Summernote图像

回答

相关问题