Problem with CKEditor inside a ColorBox modal popup

Please help me. I have an html page in which I added a modal popup from a ColorBox. In the ColorBox popup, I added CKEditor. The problem is this:

In IE, CKEditor works fine, but in FF and Chrome I get CKEditor as in readonly mode (I can't type anything in it). If I put CKEditor directly on the page (and not in the modal popup), it works fine in all browsers.

I think this may be a problem with the z-index on one of the elements generated by CKEditor. But I don’t know which one?

I would really appreciate plz help, thanks in advance!

+4
source share
4 answers

We circumvented our problem by switching light boxes instead of using ColorBox using Simple Modal. I have a strange feeling that this will work for you. Good luck

+1
source
<script> $(document).ready(function() { initCKEditor(); //function ckeditor. $("#id_textarea").val(CKEDITOR.instances.id_textarea.getData()); }); </script> 
+1
source

Render / create ckeditor on the colorbox "onComplete" callback.

See callbacks here: http://www.jacklmoore.com/colorbox

0
source

After some debugging, I found that it was due to the CSS rule.

In the skin named kama you need to change the following CSS rule in mainui.css :

 .cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe { position: absolute; top: 0; } 

To:

 .cke_skin_kama .cke_browser_ie.cke_browser_quirks .cke_contents iframe { top: 0; } 

Depending on your setting, you may need to change it in skins/kama/editor.css

However, I recommend upgrading to a newer version of ckeditor. I found this problem on version 3.6.2.

0
source

Source: https://habr.com/ru/post/1344586/


All Articles