我有可以添加到页面上的文本小部件。单击应该将 div 激活到所见即所得编辑器中。单击编辑器外部的任何位置都会破坏编辑器,并将新内容写入 div。
在准备回调的文档中:
var ckeditorConfig = {
toolbar :
[
[ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
[ 'Font', 'FontSize']
],
toolbarCanCollapse : false,
toolbarLocation : 'top',
resize_enabled : false,
removePlugins : 'maximize,resize',
};
window.ckeditorHover = false;
$('.we-widget-wrapper').hover(
function(){
window.ckeditorHover = true;
},
function(){
window.ckeditorHover = false;
}
);
$('.we-widget-textbox')
.click(function(e){
e.stopPropagation();
var id = "" + $(this).attr('id');
if (CKEDITOR.currentInstance){
CKEDITOR.currentInstance.destroy();
}
CKEDITOR.replace(id, ckeditorConfig);
});
$('html')
.click(function(e){
if(!window.ckeditorHover){
if (CKEDITOR.currentInstance){
CKEDITOR.currentInstance.destroy();
}
}
});
html部分:
<div class='we-widget-wrapper'>
<div id='textbox01' class='we-widget-textbox we-widget'>
<p>Some text here...</p>
</div>
</div>
我已将两者包装在 we-widget-wrapper 类中,因为 CKEditor 暂时隐藏了我的 div,并在其下方附加了它自己的 div,并且我想捕获鼠标是否位于编辑器上方或小部件 div 上方。
这工作得很好,除了当我快速单击 div 时,它的外部编辑器和 div 都会消失。