Summernote从URL上传图片

Question

Summernote从URL上传图片

javascriptphpajaximage-uploadingsummernote

6

我在我的网站上使用summernote html文本编辑器。当用户在图像URL区域输入图像URL并按下插入图像按钮时，我希望将图像下载到我的服务器上。

目前，summernote仅获取图像的源作为src属性。我希望将图像存储在自己的Amazon S3 Bucket或VPS上。

有许多关于summernote图像上传的文档，但所有文档都是针对从计算机上传而不是从URL上传的。

我该如何覆盖此功能？

图片对话框

- hakkikonu

1

将URL通过ajax调用或类似方式传递到您的服务器，然后使用您的服务器端技术（根据您上面的标记看起来像是php）进行下载，并随后发送到Amazon S3 - 虽然您可能能够直接使用Amazon S3 REST API从浏览器访问Amazon S3，http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html - Tim Harker

使用Ckeditor会更好。 - user7601056

使用 CKeditor 上传图片 https://github.com/fxstar/CKeditorUpload - user7601056

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Myznikov · Accepted Answer

因为你无法在客户端脚本中读取跨域图像的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。 更新（关于img样式的评论） 将以下行放入summernote.js中，以在编辑器处理图像网址时触发特殊事件。

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

请将其放在insertImage()方法内4095行（根据我的文件版本）之前。

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

现在在index.php文件中的</p>标签内。

$('.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');
        });
    }
});