隱藏和顯示kendo ui編輯器工具欄

我正在使用kendo ui編輯器控件。像隱藏和顯示kendo ui編輯器工具欄

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

起初我顯示僅可編輯區域和隱藏編輯工具欄我顯示，在劍道UI編輯器選擇功能類似

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

我想隱藏除體上的工具欄kendo ui編輯器中的可編輯區域。我曾嘗試過，如

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

但這不起作用。在選擇工具欄中的下拉菜單中也是隱藏的。當我點擊工具欄上的任何東西時，我不想隱藏工具欄。我怎樣才能做到這一點

來源

2013-08-30 Jonathan

難道你有我的解決方案的成功？ – ryan

對於遲到的回覆感到抱歉。我幾乎得到它。但是有一個問題。當我們在可編輯區域上方的標題上選擇時，它正在隱藏。當我們選擇添加超鏈接時，它就隱藏了。當我們選擇圖片也是隱藏。我怎麼能這樣做 – Jonathan

這將需要更多的國旗檢查和設置。您必須使用我的解決方案作爲每個項目的起點。僅供參考，添加超鏈接等操作會導致在對話框打開時隱藏（使用當前解決方案），但在插入焦點後，將再次在內容區域上設置焦點，導致該欄重新出現。您需要認識並接受這種定製不是開箱即用的功能，並且能夠爲每個未來的場景設計解決方法*或*停止使用此定製。 – ryan

這很有趣。用於Editor的DropDownList實際上是SelectBox。這意味着我必須改用.data('kendoSelectBox')。

這是fiddle。下面的代碼：

$(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-30 17:51:00 ryan

$scope.$on('kendoWidgetCreated', function(event, widget) { 
    $('.k-editor-toolbar').hide(); 
}

來源

2017-07-04 09:00:52

隱藏和顯示kendo ui編輯器工具欄

回答

相關問題