How can I show the toolbar when an image is clicked?

[mingfang]

Currently the toolbar will only show when text is selected. I have to show the toolbar when an image is clicked. something like this

$("#editable img").click(function(){editor.showToolbar()})

Is there a way to programmatically show the toolbar?

[mingfang]

I figured it out.

[jacksoncapper]

How?

[mingfang]

Here is the code that I used. It's been a while since I wrote it and it was for v1.9.4

       var imageEditor = new MediumEditor('#editable-image',{
            disableEditing:true,
            buttons: ['upload', 'video'],
            extensions: {
                upload: new UploadExtension(),
                video: new LinkExtension()
            }
        });
        var hideAllToolbars = function(){
            if (window.getSelection) {
                if (window.getSelection().empty) {  // Chrome
                    window.getSelection().empty();
                } else if (window.getSelection().removeAllRanges) {  // Firefox
                    window.getSelection().removeAllRanges();
                }
            } else if (document.selection) {  // IE?
                document.selection.empty();
            }
            categoryEditor.hideToolbarActions();
            bodyEditor.hideToolbarActions();
        };
        $("#editable-image img" ).click(function(event){
            hideAllToolbars();
        });
        $("#editable-image img" ).dblclick(function(event){
            defaultLeft = (imageEditor.options.diffLeft) - (imageEditor.toolbar.offsetWidth / 2);
            halfOffsetWidth = imageEditor.toolbar.offsetWidth / 2;
            imageEditor.toolbar.style.left = (defaultLeft  + event.pageX) + 'px';
            imageEditor.toolbar.style.top = (event.pageY - imageEditor.toolbar.offsetHeight - 16) + 'px';
            imageEditor.toolbar.classList.add('medium-toolbar-arrow-under');
            imageEditor.toolbar.classList.remove('medium-toolbar-arrow-over');
            imageEditor.showToolbarActions();
        });