ckeditor：按需显示和隐藏内联工具栏
[英]Ckeditor: show and hide inline toolbar on demand
问题描述
I use inline Ckeditor to edit content.
我使用内联Ckeditor来编辑内容。 By default, the inline editor is activated by double click a div with contenteditable="true" .默认情况下，通过双击带有contenteditable="true"的div来激活内联编辑器。 I want to activate this inline editor when I click a button, and hide it when I click another button.我想在单击按钮时激活此内联编辑器，并在单击另一个按钮时隐藏它。 Here is an example of html code:下面是一个 html 代码示例：
<html>
<head>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<div id="first" contenteditable="true">first</div>
<div id="second" contenteditable="true">second</div>
<input type="button" value="show inline editor">
<input type="button" value="hide inline editor">
</body>
</html>
Jsfiddle shows the default behavior and what i want to have http://jsfiddle.net/vdRYL/ Jsfiddle 显示了默认行为以及我想要的http://jsfiddle.net/vdRYL/
4 个解决方案
解决方案1
2 2018-02-09 21:04:30
We can hide and show toolbar.我们可以隐藏和显示工具栏。 I have achieved this functionality using following way:我使用以下方式实现了此功能：
Open ckeditor.js file.打开ckeditor.js文件。 And paste below code at the end of the file并在文件末尾粘贴以下代码
$(document).ready(function () {
CKEDITOR.on('instanceReady', function (ev) {
document.getElementById(ev.editor.id + '_top').style.display = 'none';
ev.editor.on('focus', function (e) {
document.getElementById(ev.editor.id + '_top').style.display = 'block';
});
ev.editor.on('blur', function (e) {
document.getElementById(ev.editor.id + '_top').style.display = 'none';
});
});
});
解决方案2
1 已采纳 2013-12-08 03:48:34
The CKeditor seems to be activating the editor-window on focus of contenteditable element and not on double-click . CKeditor 似乎在contenteditable元素的focus上而不是在double-click上激活编辑器窗口。 You can do something like this to get your buttons to work,你可以做这样的事情来让你的按钮工作，
http://jsfiddle.net/nagendra_rao/vdRYL/1/ http://jsfiddle.net/nagendra_rao/vdRYL/1/
解决方案3
1 2015-09-10 06:59:04
You can use focusManager.blur(true) in order to hide the toolbar.您可以使用focusManager.blur(true)来隐藏工具栏。
http://jsfiddle.net/vdRYL/24/ http://jsfiddle.net/vdRYL/24/
var cke = CKEDITOR.inline('target');
var btnClose = document.getElementById('btnClose');
btnClose.addEventListener('click', function(event){
cke.focusManager.blur(true);
});
More info on focusManager here: http://docs.ckeditor.com/#!/api/CKEDITOR.focusManager-method-blur关于 focusManager 的更多信息： http ://docs.ckeditor.com/#!/api/CKEDITOR.focusManager-method-blur
解决方案4
1 2021-01-04 20:26:49
For Angular对于角
The toolbar element has class " ck-editor__top ", so i used below code to hide / display it:工具栏元素有类“ ck-editor__top ”，所以我使用下面的代码来隐藏/显示它：
component.html组件.html
added to 'ckeditor' tag below 3 listeners:添加到 3 个侦听器下方的“ckeditor”标签：
<ckeditor
(ready)="changeEditorToolbar('none')"
(focus)="changeEditorToolbar('block')"
(blur)="changeEditorToolbar('none')"
>
</ckeditor>
component.ts组件.ts
changeEditorToolbar(displayValue)
{
let elements = Array.from(document.getElementsByClassName('ck-editor__top') as HTMLCollectionOf<HTMLElement>);
elements[0].style.display = displayValue;
}
Note:注意：
Pay attention, if you have multiple ck editors in the same component, you should not use [0] to get the first one注意，如果同一个组件有多个ck编辑器，不要用[0]获取第一个
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.