如何解决如何在编辑器外部单击关闭CKEditor或tinyMCE?
| 我有可以在页面上添加的文本小部件。单击应将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都立即消失之外,这工作正常。
解决方法
这是从文本区域删除TinyMCE的方法:
tinyMCE.execCommand(\'mceRemoveControl\',false,\'id\');
您也可以使用\'mceAddControl \'或\'mceToggleEditor \'以获得更多控制。 \'id \'是文本区域上的id属性。
在您以正常方式启动TinyMCE之前,此方法应该可以工作,如果不查看源代码,就不能更具体了!
,这是您需要在按钮onclick动作上放置代码以关闭CKEditor的代码
CKEDITOR.instances.editor1.destroy();
,CKEditor似乎为“ stopPropagation”提供了API
因此,我的解决方案是在主体上放置一个onclick事件,但停止在编辑器上传播click事件。
例如
var element = CKEDITOR.document.getById( \'myElement\' );
element.on( \'click\',function( ev )
{
// The DOM event object is passed by the \"data\" property.
var domEvent = ev.data;
// Prevent the click to chave any effect in the element.
domEvent.stopPropagation();
});
身体事件将是这样的(嗯,不完全是,只是为了说明)
$(\"body\").click(function(event){
element.destroy();
});
看这里
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。