javascript CKEditor 4 Inline：如何按需隐藏工具栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15877948/
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
CKEditor 4 Inline: How to hide toolbar on demand?
提问by Mike
Normally when you click other place in the page other than the edit area, the toolbar will hide, now i need to hide the toolbar also on user command(such as user press a shortcut).
通常，当您单击页面中除编辑区域以外的其他位置时，工具栏会隐藏，现在我还需要在用户命令上隐藏工具栏（例如用户按下快捷方式）。
I tried to call jQuery hidemethod on ckeditor toolbar div, but once hidden, it will never become visible even when user focus on the edit area.
我试图hide在 ckeditor 工具栏 div 上调用 jQuery方法，但是一旦隐藏，即使用户专注于编辑区域，它也永远不会变得可见。
Any ideas on how to achieve this? Many thanks.
关于如何实现这一目标的任何想法？非常感谢。
采纳答案by Wasif.Butt
did you try to do jQuery Show when the focus comes back in to the edit area?
当焦点回到编辑区域时，您是否尝试过 jQuery Show？
you can also attach to the focus and blur events to show and hide toolbar:
您还可以附加到焦点和模糊事件以显示和隐藏工具栏：
// Call showToolBarDiv() when editor get the focus
editor.on('focus', function (event)
{
showToolBarDiv( event );
});
// Call hideToolBarDiv() when editor loses the focus
editor.on('blur', function (event)
{
hideToolBarDiv( event );
});
//Whenever CKEditor get focus. We will show the toolbar DIV.
function showToolBarDiv( event )
{
// Select the correct toolbar DIV and show it.
//'event.editor.name' returns the name of the DIV receiving focus.
$('#'+event.editor.name+'TBdiv').show();
}
//Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
function hideToolBarDiv( event )
{
// Select the correct toolbar DIV and hide it.
//'event.editor.name' returns the name of the DIV receiving focus.
$('#'+event.editor.name+'TBdiv').hide();
}
回答by sajjad
where you create instance of ckedito use below code. editor.id use for three part of ckeditor, toolbar,edit area, footer for example if editor.id have 'cke_12' value for toolbar div id is 'cke_12_top'. note this is for iframe mode.
在您创建 ckedito 实例的地方使用以下代码。editor.id 用于 ckeditor、工具栏、编辑区域、页脚的三部分，例如如果 editor.id 具有“cke_12”值，工具栏 div id 为“cke_12_top”。请注意，这是针对 iframe 模式的。
CKEDITOR.replace(divId, {toolbar: [
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
{name: 'editing', items: ['Format', 'Font', 'FontSize', 'TextColor', 'BGColor' , 'Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] }
]});
//use for loop because i have multi ckeditor in page.
for (instance in CKEDITOR.instances) {
var editor = CKEDITOR.instances[instance];
if (editor) {
// Call showToolBarDiv() when editor get the focus
editor.on('focus', function (event) {
showToolBarDiv(event);
});
// Call hideToolBarDiv() when editor loses the focus
editor.on('blur', function (event) {
hideToolBarDiv(event);
});
//Whenever CKEditor get focus. We will show the toolbar span.
function showToolBarDiv(event) {
//'event.editor.id' returns the id of the spans used in ckeditr.
$('#'+event.editor.id+'_top').show();
}
function hideToolBarDiv(event) {
//'event.editor.id' returns the id of the spans used in ckeditr.
$('#'+event.editor.id+'_top').hide()
}
}
}
