Show toolbar only on focus

[williamjulianvicary]

This is a really neat script, but I've been messing about with one area for hours and I'm sure it's straight forward but it's really not working for me.

I am using the following (via https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg)

<script>
    $('.div').wysihtml5({
    toolbar: {"size":"xs"},
    showToolbarAfterInit: false,
     "events": {
          "focus": function(){
             this.toolbar.show();
         },
          "blur": function() {
             this.toolbar.hide(); 
        }
    }
});
</script>

This works, and hides the toolbar for load and on focus the toolbar shows, however as the toolbar is outside of the focus area as soon as you try to utilise the toolbar functions it disappears! I'm presuming this was a pretty common request and hence the option for "showToolbarAfterInit" is added but I can't for the life of me figure this out!

Any tips to allow the toolbar to be used but to hide it once focus has removed from the editor (not just the editable area).

I'm using the editable divs rather than iframe, in case that would make a difference?

Thank you!

[OtherCroissant]

It looks like this is a solution (coffeescript), add the following to your options:

    showToolbarAfterInit: false,
    events:
      'show:dialog': ->
        $(this.toolbar.container).addClass('keep-open')
      'cancel:dialog': ->
        $(this.toolbar.container).removeClass('keep-open')
      focus: ->
        toolbar = $(this.toolbar.container)
        unless toolbar.hasClass('keep-open')
          toolbar.slideDown()
      blur: ->
        toolbar = $(this.toolbar.container)
        unless toolbar.hasClass('keep-open')
          toolbar.slideUp()