最近在项目上有一个简单的需求,在使用CKEditor编辑器时,点击最大化按钮,需要让最大化的窗口获得焦点,弹出退出提示,同时提供按键盘ESC键退出全屏编辑模式。这个操作模式有点类似于在Chrome中按F11全屏的效果。
这里用了CKEditor中的几个事件解决了这个问题。问题本身并不是很复杂,主要是我对于CKEditor这个强大编辑器的不熟悉,导致查了不少资料,现在将过程记录一下。
本文用到的方法只是很少的一部分,如果你需要了解更多CKEditor的方法,可以看这里的简单方法参考,或者直接阅读官方文档。
思路
- 用户点击最大化按钮时,弹出提示,获取焦点
- 用户按ESC键时,如果处于全屏状态,执行缩小化
用到的方法
监听最大化切换事件
ev.editor.on('maximize', function(){//code...});
监听键盘按键事件
ev.editor.on('key', function(){//code...});
获取当前全屏模式状态
ev.editor.getCommand('maximize').state;
执行全屏模式动作
ev.editor.execCommand('maximize');
实现代码
JS部分:
CKEDITOR.on('instanceReady', function (ev) {
//When on fullscreen mode, set focus on editor, show tips of how to exit full-screen
ev.editor.on('maximize', function(evt) {
evt.editor.focus();
if (evt.editor.getCommand('maximize').state == CKEDITOR.TRISTATE_ON) {
var message = $('<div class="exit-full-screen-message" style="display: none;">Press ESC to exit full-screen mode</div>');
message.appendTo($('body')).fadeIn(300).delay(2000).fadeOut(500);
}
});
//When press "ESC" key, check maximize state, if on fullscreen mode, minimize editor
ev.editor.on('key', function (evt) {
if (evt.data.keyCode == 27) {
if (evt.editor.getCommand('maximize').state == CKEDITOR.TRISTATE_ON) {
evt.editor.execCommand('maximize');
}
}
});
});
CSS部分(主要为了设置全屏浮动提示框的样式):
.exit-full-screen-message {
position: fixed;
top: 3px;
left: 50%;
margin-left: -150px;
width: 300px;
z-index: 9999;
background-color: rgba(0,0,0,0.5);
color: white;
text-align: center;
font-size: 16px;
line-height: 2em;
border-radius: 8px;
}
还不快抢沙发