Tenho widgets de texto que podem ser adicionados à página. Um clique deve ativar a div em um editor wysiwyg. Um clique em qualquer lugar fora do editor deve destruir o editor com o novo conteúdo gravado na div.

no documento em retorno de chamada pronto:

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();
                }
            }
        });

A parte html:

<div class='we-widget-wrapper'>
     <div id='textbox01' class='we-widget-textbox we-widget'>
         <p>Some text here...</p>
     </div>
</div>

Eu envolvi ambos na classe we-widget-wrapper porque o CKEditor oculta temporariamente minha div e, abaixo dela, anexa sua própria div e eu quero capturar se o mouse estiver sobre o editor ou sobre a div do widge

Isso funciona bem, exceto quando clico rapidamente na div, imediatamente fora dela, o editor e a div desaparece