隐藏和显示剑道ui编辑器工具栏

Hide and show of kendo ui editor toolbar

本文关键字：ui 编辑器 工具栏 显示 隐藏      更新时间：2023-09-26

我正在使用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();
       });

但这是行不通的。在工具栏中选择下拉菜单时，它也处于隐藏状态。当我点击工具栏上的任何东西时，我都不想隐藏工具栏。我如何才能做到

这很有趣。用于CCD_ 2的CCD_ 1实际上是CCD_。这意味着我不得不使用.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);
    });
});

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