Hide and show of kendo ui editor toolbar

Question

I am using kendo ui editor control. Initially i am showing only editable area and hiding editor tool bar like

<style>
  .k-editor-toolbar
    {
       display:none;
    }
</style>

I am showing that in select function of kendo ui editor like

 $("#editor").kendoEditor({
     select: function(e){
         $(".k-editor-toolbar").show();
      }
 });

I want to hide the tool bar on body except the editable area in the kendo ui editor. I have tried like

    $('body').on('click', ':not(#editor)', function () {
           $(".k-editor-toolbar").hide();
       });

But this is not working. on select of Dropdowns in the toolbar also it is hiding. I don't want to hide the tool bar when i click any thing on the toolbar. How can i able to do that

hey sorry for the late reply. I almost got it. But there is an issue.When we selecting on the header above the editable area it is hiding. and when we select the add hyperlink it is hiding. when we selecting picture also it is hiding. How can i do that — Jonathan
That would require more flag checking and setting. You'll have to use my solution as a starting point for each of those items. FYI an action such as adding hyperlinks will cause it to hide while the dialog is open (with the current solution) but after inserting the focus will be set once again on the content area which causes the bar to re-appear. You'll need to realize and accept that this customization isn't an out of the box feature and be able to engineer a workaround for each future scenario or stop using this customization. — ryan

ryan ryan · Accepted Answer · 2013-08-30T17:51:00

This was interesting. The DropDownList used for the Editor is actually a SelectBox. That meant I had to use .data('kendoSelectBox') instead.

Here's a fiddle. Here's the code:

$(function () {
    var $log = $('#log'), fontDDL, isOpen = false;

    $("#editor").kendoEditor({
        select: function (e) {
            $(".k-editor-toolbar").show();
            $('#log').prepend('<div>Focused</div>');
        }
    });

    fontDDL = $('[data-role=selectbox]').data('kendoSelectBox');
    fontDDL.bind('open', function () {
        isOpen = true;
        $(".k-editor-toolbar").show();
        $('#log').prepend('<div>Opened</div>');
    });
    fontDDL.bind('close', function () {
        isOpen = false;
        $(".k-editor-toolbar").hide();
        $('#log').prepend('<div>Closed</div>');
    });

    $($('.k-editor').find('iframe')[0].contentWindow).blur(function () {
        $('#log').prepend('<div>Blurred</div>');
        // Kind of a hack because there's no better way to hook into the font
        // dropdownlist open event and it is triggered after the blur. Tweak
        // the timeout value to whatever works best for you. 200ms
        // is slightly conservative
        setTimeout(function () {
            $('#log').prepend('<div>Is font DDL open? ' + isOpen + '</div>');
            if (!isOpen) {
                $(".k-editor-toolbar").hide();
            }
        }, 200);
    });
});

Hide and show of kendo ui editor toolbar

2 Answers