Summernote image upload from URL

So since you are not able to read dataUrl of cross-origin images in your client-side script the decision is to get url from Image URL area and send it to your backend. There you may use a simple php script to download the image.

The example includes both client and backend codes. Both tested. All you need is to put these two scripts to one of your web server's directories and give it a try.

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

For example with this image https://imgsnap.com/images/2015/02/23/abstract_0005.jpg

UPDATE (to your comment about img styling)

Put the following line in summernote.js to trigger a special event when image url has been handled by the editor.

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

Put it on line 4095 (according to my version of file) inside of insertImage() method before

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

Now in index.php inside of

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

...
});

replace all the code with this

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

Recommended topics

Hot tags