如何在编辑器外部单击关闭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();
});

看这里