如何在编辑器外部单击关闭 CKEditor 或 tinyMCE？答案

【问题标题】：How can i close CKEditor or tinyMCE on a click outside of the editor?如何在编辑器外部单击关闭 CKEditor 或 tinyMCE？
【发布时间】：2011-05-26 08:47:07
【问题描述】：

我有可以添加到页面上的文本小部件。单击应将 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 都消失了。

【问题讨论】：

您好，发布您的（相关）html 源代码有什么难的？此操作使帮助变得更容易。注意：一个单独的问题总是需要一个单独的解决方案。
嗨。我虽然没有必要发布整个 html 代码。其余的并没有改变，只有这一部分让我感到困扰。我认为以这种方式指出它会更清晰，这样就不必遍历与此问题无关的所有其他代码。示例中的 div 可以位于页面中的任何位置。稍后它们将被动态添加。我只是在一个空白页面上使用这个 div 来测试编辑器的行为。

标签： javascript tinymce ckeditor wysiwyg

【解决方案1】：

这是您需要放置在按钮 onclick 操作上以关闭 CKEditor 的代码

CKEDITOR.instances.editor1.destroy();

【讨论】：

我想避免这种情况。我希望用户单击 div 之外页面上的任意位置以关闭 CKEditor
当从页面上的任何位置作为按钮操作放置时，这应该可以工作

【解决方案2】：

以下是从文本区域中删除 TinyMCE 的方法：

tinyMCE.execCommand('mceRemoveControl', false, 'id');

您还可以使用“mceAddControl”或“mceToggleEditor”进行更多控制。 'id' 是 textarea 上的 id 属性。

这应该可以在您以正常方式启动 TinyMCE 之前工作，如果没有看到您的源代码就无法更具体！

【讨论】：

我附上了一个示例代码。我没有尝试过 tinyMCE，因为我不确定它是否适用于 div 或仅适用于 textareas。
那你连TinyMCE都不用了？请从您的问题中排除它。 FWIW TinyMCE 仅适用于 textareas
我会试一试并报告，因为我必须决定使用哪一个，这取决于哪一个会为我完成所需的工作。
我再次查看了这个问题，并决定我不必使用 div 而不是 textarea，所以现在它会是 tinyMCE。感谢您的命令提示:)

【解决方案3】：

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 事件将是这样的（嗯，不完全是，只是为了说明）

$("body").click(function(event){
    element.destroy();
});

见here

【讨论】：