How can i close CKEditor or tinyMCE on a click outside of the editor?

Question

I have text widgets that can be added on the page. A click should activate the div into a wysiwyg editor. A click anywhere outside of the editor should destroy the editor with the new content written to the div.

in the document on ready callback :

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

The html part:

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

I've wrapped both in the we-widget-wrapper class because CKEditor temporarely hides my div and below it appends it's own div and i want to catch if the mouse is over the editor or over the widget div.

This works fine except when i click fast on the div the immediately outside of it both the editor and the div disappear.

Answer 1

Here's how to remove TinyMCE from a textarea:

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

You can also have 'mceAddControl' or 'mceToggleEditor' for more control. 'id' is the id attribute on the textarea.

This should work pending you've initiated TinyMCE in the normal ways, can't be more specific without seeing your source code!

Answer 2

This is the code you would need to place on a button onclick action to close CKEditor

CKEDITOR.instances.editor1.destroy();

Answer 3

CKEditor seems to provide an API to "stopPropagation"

So my solution would be to put an onclick event on the body, but stop propagation of the click event on the editor.

e.g.

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

and the body event will be something like this (well, not exactly, but just to illustrate)

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

see here