How to hide ckeditor when we click outside of the editor?

Question

Here is my code:

<div id="showReplyDiv">
  <form id="test">
   <div>
       <textarea id="articleEditor" name="articleVO.articleC"></textarea>
           <script type="text/javascript">
            CKEDITOR.replace( 'articleEditor',{customConfig : '/Forum/ckeditor/replyCKEditor.js'}); 
        </script>
    </div>
    <div id="buttonArea">
        <input type="button" id="doReply" value="submit"/>
        <input type="button" id="cancel" value="cancel"/>
    </div>
    </form>
</div>

I want it so that when the user clicks anywhere outside of this ckEditor, I can hide it.

What have you attempted so far? You need to ask a specific question, not ask for someone to solve your problems for you. — Jordan, Nov 21 '11 at 07:01
sorry, i am the beginner of jquery and ckeditor,about two days,and i had try some ways ,but it doesn't work, — Gentle Song, Nov 21 '11 at 14:36

score 3 · Accepted Answer · answered Nov 21 '11 at 07:13

3

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

    if($(event.target).parents('#articleEditor').length <= 0)
         $('#articleEditor').hide();
})

answered Nov 21 '11 at 07:13

erimerturk

4,230
25
25

thank you for your answer,i alter it a litter and works for my application – Gentle Song Nov 21 '11 at 07:53
hello,there has another question,when i want to insert a image,i click the botton on the toolbar,then select one image,but the ckeditor disappeared – Gentle Song Nov 21 '11 at 14:21

score 1 · Answer 2 · answered Apr 08 '15 at 10:37

The solution to a similar problem wasn't working for me due to clicks in dialog widgets. I ended up using

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

    if($(event.target).parents('#articleEditor').length <= 0 && $(event.target).parents('.cke_dialog').length <= 0)
         $('#articleEditor').hide();
})

How to hide ckeditor when we click outside of the editor?

2 Answers2

Linked