insertImage into Editor from File Browser

[ghost]

I've been playing with adding a File Browser into the summernote "Insert Image" dialog box. So far I have been able to add tabs into the dialog, and add a json/php routine to grab the files from a folder, and display the images. I've also been able to add a click event which returns the file path in an alert box for now. But I have yet been able to make that image insert into the editor itself. I've double spaced where I think the issue is.
The code to read the files has been modified from Redactor, with small tweaks to get it working here.
I know this is something a lot of use have been wanting for some time, and I hope this goes at least in a small way to getting this implemented for the future.

tplDialog = function (lang, options) {
  var tplImageDialog = function () {
var choose='';
$.getJSON('getfiles.php', $.proxy(function(data) {
    var folders = {};
    var z = 0;
    $.each(data, $.proxy(function(key, val){
        if (typeof val.folder !== 'undefined'){
            z++;
            folders[val.folder] = z;
        }
    }, this));
    var folderclass = false;
    $.each(data, $.proxy(function(key, val){
        var thumbtitle = '';
        if (typeof val.title !== 'undefined'){
            thumbtitle = val.title;
        }
        var img = $('<img src="' + val.thumb + '" class="img-thumbnail" style="width:75px;max-height:75px;margin:5px;" rel="' + val.image + '" title="' + thumbtitle + '" />');
        $('#imagebox').append(img);
        $(img).on(
            "click",function(){


                alert(val.thumb);
                editor.insertImage(val.thumb);


            }
        );
    }));
}));
    return '<div class="note-image-dialog modal" aria-hidden="false">' +
    '<div class="modal-dialog">' +
        '<div class="modal-content">' +
            '<div class="modal-header">' +
                '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                '<h4>' + lang.image.insert + '</h4>' +
            '</div>' +
            '<div class="modal-body">' +
                '<ul class="nav nav-tabs">' +
                    '<li class="active"><a href="#upload" data-toggle="tab">Upload</a></li>'+
                    '<li><a href="#choose" data-toggle="tab">Choose</a></li>'+
                    '<li><a href="#link" data-toggle="tab">Link</a></li>'+
                '</ul>'+
                '<div class="row-fluid">' +
                    '<div class="tab-content">'+
                        '<div class="tab-pane fade in active" id="upload">'+
                            '<h5>Upload Files from Computer</h5>' +
                            '<input type="file" name="files" class="note-image-input filestyle" accept="image/*" data-classButton="btn btn-default" data-input="false" />' +                            
                        '</div>'+
                        '<div class="tab-pane fade" id="choose">'+
                            '<h5>Choose from Uploaded Files</h5>'+
                            '<div id="imagebox" class="well">' + choose + '</div>'+
                        '</div>'+
                        '<div class="tab-pane fade" id="link">'+
                            '<h5>' + lang.image.url + '</h5>' +
                            '<input class="note-image-url form-control span12" type="text" />' +
                        '</div>'+
                    '</div>'+
                '</div>' +
            '</div>' +
            '<div class="modal-footer">' +
                '<button href="#" class="btn btn-primary note-image-btn disabled" disabled="disabled">' + lang.image.insert + '</button>' +
            '</div>' +
        '</div>' +
    '</div>' +
           '</div>' +
           '<script>$(":file").filestyle({input:false});</script>';
  };

[ghost]

I have spent the last two days since this issue was opened trying to work out how to insert ANY content into the contenteditable div. Seeing as summernote is capable of doing it when uploading an image, or adding links and other stuff, then it already has a function for adding content where the caret position is, unfortunately I haven't been able to make heads or tails how to implement the usage of it. Surely, someone here has had the same issue with other types of content, and that the insertImage is able to do it when uploading images as I've found code for that, and it inserts the images at the caret position, someone must have a solution. This is one small thing I am asking, and I'm more than happy to share the rest of the code for implementing or for others to use with the editor. I'm also adding the ability to add any types of uploaded files for linking, like .zip, or documents, like .doc, or .pdf, as some of my client's require it. I've even created the php side to read the files into a json array to allow selecting the files via thumbnails for images, or filenames for files.

So far I've been using a seperate jquery addon to determine the position of the caret within the .note-editable classed contenteditable div. And it works, but for one thing, it doesn't for some reason take into consideration of tags which are not visible, so no matter how many chars in tags are in the text, it positions the content that many chars away from the correct caret position to the left.

[ghost]

After a little help from issue #293 with thanks to @maksymcierzniak, I've come up with the following, and is working fine, I'm adding it here in case anyone else wants to use it. I also have a similar browser for added content, like .pdf, .zip and so on, if requested I'll post the code here too. I hope this helps others.

tplDialog = function (lang, options) {
    var tplImageDialog = function () {
        var choose='';
        $.getJSON('includes/get_images.php', $.proxy(function(data) {
            $.each(data, $.proxy(function(key, val){
                var img = $('<img src="' + val.thumb + '" class="img-thumbnail" style="width:75px;max-height:75px;margin:5px;" rel="' + val.image + '" title="' + val.title + '" />');
                $('#imagebox').append(img);
                $(img).on("click",function(){
                    var $image=$('<img>').attr('src',val.thumb);
                    $('.note-editable').data('range').insertNode($image[0]);
                    $(this).closest('.modal').modal('hide');
                });
            }));
        }));
        return '<div class="note-image-dialog modal" aria-hidden="false">' +
                '<div class="modal-dialog">' +
                    '<div class="modal-content">' +
                        '<div class="modal-header">' +
                            '<button type="button" class="close" aria-hidden="true" tabindex="-1">&times;</button>' +
                            '<h4>' + lang.image.insert + '</h4>' +
                        '</div>' +
                        '<div class="modal-body">' +
                            '<ul class="nav nav-tabs">' +
                                '<li class="active"><a href="#upload" data-toggle="tab">Upload</a></li>'+
                                '<li><a href="#choose" data-toggle="tab">Choose</a></li>'+
                                '<li><a href="#link" data-toggle="tab">Link</a></li>'+
                            '</ul>'+
                            '<div class="tab-content">'+
                                '<div class="tab-pane fade in active" id="upload">'+
                                    '<h5>Upload Files from Computer</h5>' +
                                    '<input type="file" name="files" class="note-image-input filestyle" accept="image/*" data-classButton="btn btn-default" data-input="false" />' +                            
                                '</div>'+
                                '<div class="tab-pane fade" id="choose">'+
                                    '<h5>Choose from Uploaded Images</h5>'+
                                    '<div id="imagebox" class="well"></div>'+
                                '</div>'+
                                '<div class="tab-pane fade" id="link">'+
                                    '<h5>' + lang.image.url + '</h5>' +
                                    '<input class="note-image-url form-control span12" type="text" />' +
                                '</div>'+
                            '</div>'+
                        '</div>' +
                        '<div class="modal-footer">' +
                            '<button href="#" class="btn btn-primary note-image-btn disabled" disabled="disabled">' + lang.image.insert + '</button>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
           '</div>' +
           '<script>$(":file").filestyle({input:false});</script>';
    };

and the PHP component:

file($upload_dir.$file); if($type=='image/bmp'||$type=='image/x-windows-bmp'||$type=='image/jpeg'||$type=='image/pjpeg'||$type=='image/png'||$type=='image/gif'||$type=='image/tiff'||$type=='image/x-tiff'){ $docs[]=$file; } } } sort($docs); foreach($docs as $key=>$file){ $array[]=array( 'thumb'=>$path.$file, 'image'=>$upload_dir.$file, 'title'=>$file ); } echo stripslashes(json_encode($array));

[brianespinosa]

Love your work on this. We are actually going to integrate this project (https://github.com/imgly/imgly-sdk-html5) for processing the images when selected before they are inserted in the editor. We'll be able to use this to cut down on a lot of issues with users trying to add images that are not properly suited for using online... like a full 21 megapixel image.

[ghost]

Thanks, The imgly project looks interesting.

[danielkerr]

I think is what you are looking for

editor.insertImage(welEditable, url);

[hackerwins]

I thought #1203 is helpful for this.