1

I want to close CKEditor if I click outside its window.

Stopping propagation on a div enclosing the textarea being replaced by ckeditor, like so

$('#resumo_div').click(function (event) { event.stopPropagation(); });

and then detecting the click this seems to mostly work.

The exception are clicks on ckeditor widgets like the Link widget which are being detected as being outside. Is there a standard way to doing this?

jmatos
  • 123
  • 1
  • 2
  • 8

2 Answers2

0

Your problem is that the event handler is going to start with the widgets as they are the top-most elements that were clicked. By the time the event gets to your encompassing div, the widget will have been enacted. Instead of enclosing the ckeditor in a div (overlay for my example that when clicked will close the ckeditor). Move the ckeditor outside of the div (overlay).

<div class="overlay"></div>
<div id="ckeditor-container"></div>

<style>
   .overlay {
       position: fixed;
       width: 100%;
       height: 100%;

    }
    #ckeditor-container {
       position: fixed;
       top: 50%;
       height: 200px;
       margin: -100px auto 0 auto; /* center the container */
    }
</style>
KJ Price
  • 5,774
  • 3
  • 21
  • 34
  • I think that you are suggesting that I detect clicks on some other div that represents outside instead of trying to decide if a click did not come from ckeditor or a widget. Unfortunately that is not feasible in my particular circunstances. Also I do not have problems with the widget being enacted: that is not the problem. – jmatos Apr 07 '15 at 13:54
0

After discovering How to hide ckeditor when we click outside of the editor? I was able to improve the solution posted there that satisfied my needs by intercepting clicks in widgets

$('body').click(function(event){

    if($(event.target).parents('#articleEditor').length <= 0 &&  $(event.target).parents('.cke_dialog').length <= 0)
         $('#articleEditor').hide();
})
Community
  • 1
  • 1
jmatos
  • 123
  • 1
  • 2
  • 8