0

私は kendo ui エディター コントロールを使用しています。最初は、編集可能な領域のみを表示し、エディターのツールバーを非表示にしています

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

私は剣道UIエディタの選択機能でそれを示しています

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

剣道UIエディタで編集領域以外の本体のツールバーを非表示にしたい。私はのように試しました

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

しかし、これは機能していません。ツールバーのドロップダウンを選択すると、非表示になります。ツールバーの何かをクリックしたときにツールバーを非表示にしたくありません。どうすればそれができますか

4

2 に答える 2

0

これは面白かったです。にDropDownList使用される は、Editor実際にはSelectBoxです。つまり、.data('kendoSelectBox')代わりに使用する必要がありました。

ここにフィドルがあります。コードは次のとおりです。

$(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);
    });
});
于 2013-08-30T17:51:00.793 に答える