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 wi

Answer 1

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

Answer 2

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 3

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

CKEDITOR.instances.editor1.destroy();