javascript 隐藏和显示剑道 ui 编辑器工具栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18527472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide and show of kendo ui editor toolbar
提问by Jonathan
I am using kendo ui editor control. Initially i am showing only editable area and hiding editor tool bar like
我正在使用 kendo ui 编辑器控件。最初我只显示可编辑区域并隐藏编辑器工具栏，如
<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
我想隐藏身体上的工具栏，除了剑道 ui 编辑器中的可编辑区域。我试过像
$('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
但这行不通。在工具栏中选择下拉菜单时，它也会隐藏。当我单击工具栏上的任何内容时，我不想隐藏工具栏。我怎么能做到这一点
采纳答案by ryan
This was interesting. The DropDownListused for the Editoris actually a SelectBox. That meant I had to use .data('kendoSelectBox')instead.
这很有趣。该DropDownList用于Editor实际上是一个SelectBox。这意味着我不得不.data('kendoSelectBox')改用。
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);
});
});
回答by Ihor Khomiak
$scope.$on('kendoWidgetCreated', function(event, widget) {
$('.k-editor-toolbar').hide();
}
