Question

I am using the div replace method to have an editor appear when text inside the div is clicked, which works fine.

My problem is closing the editor. I am using a click event attached to the body to close the editor which works fine so clicking outside the editor closes it, but because the toolbar is not loaded in the editors iframe, clicking those buttons also closes the editor which I don’t want.

So how can I close the editor by the user clicking anywhere outside the whole editor not just the text input.

function ckEditor()
{

editor=CKEDITOR.replace( 'campaign_text',
{
toolbar : 'Mini'
});

if ( window.addEventListener )
document.body.addEventListener( 'click', removeCk, false );
else if ( window.attachEvent )
document.body.attachEvent( 'onclick', removeCk );
}


function removeCk(){
editor.destroy();
}

Answer 1

You can use MouseEvent-object, which is passed to handler, and recognize, on what element has user clicked:

function removeCk(e){
    var currentElement = document.elementFromPoint(e.clientX, e.clientY);
    // ... destroy ckeditor only if currentElement isn't in panel
}