Inserting image from outside toolbar in summernote

Question

I've constructed a WYSIWYG editor with summernote. I really like the editor; but I want to add some functionality.

I'm missing the ability to insert an image which already resides on my server. You're able to upload an image and insert it into the textarea by means of editor.insertImage(welEditable, url); which is called within an onImageUpload event.
But I want to display a dialog and let the user choose an already uploaded image. By clicking on it it should enter the image to the summernote editor.

The problem I'm running into is the connection with the summernote editor. How can I send an url in the form of a string to the editor?

This is what I've constructed right now:

$('#summernote').summernote(
 {
   ...
   oninit: function() {
    //- construct button and add it to the ribbon   
        var catalogBtn = '<button id="catalogBtn" type="button" class="btn btn-normal"  data-event="launchCatalog" tabindex="-1"><i class="icon-heart"></i></button>';
        var fileGroup = '<div class="note-file btn-group">' + catalogBtn + '</div>';
        $(fileGroup).appendTo($('.note-toolbar'));
    //- add event listener for the click
        $('#catalogBtn').click(function(event) {
           showCatalog(editor);
        });
   }
})

function showCatalog(editor){
   //- some dialog logic which eventually calls this 
   //  for now the url is hard coded :)
   editor.insertImage( XXXXXX , 'http://example.com/path/to/image.png)
}

What should be used on the X's? In summernote.js it is $editable so it refers to the editable object? But which one? And how can I get that from the library?

Answer 1

SUmmernote exposes the editor by means of:

editor = $.summernote.eventHandler.getEditor();

The editable object is obtainable by means of the following jquery selector:

$('.note-editable');

So in the end I ended up using the following additional javascript:

var editor = $.summernote.eventHandler.getEditor();
editor.insertImage($('.note-editable'), src);