ckeditor LINK is not working in jQuery Dialog box

Question

I am using CKEditor Version 3.3.1, Also tried latest version 4.3 but facing same problem.

Now the problem is, Whenever I try to load the CKEDITOR to the Textarea Which is located inside the jQuery Dialog box, CKEditor loads properly, but When I try to create a hyper link, It open up the Link Popup box, but Link options (Input field, dropdown etc) is not working.

For reference see the attached screen shot. Please guide me, how to resolve this issue.

Answer 1

Here is the solution for the above problem, thats worked for me.

Solution for CKEditor Popup in a jQuery Dialog Box

Answer 2

I had the same problem, but in my case Textarea belonged to a modal window.

Removing "tabindex="-1"" was fixed.

Answer 3

I have solved it by setting z-index to a bigger value than my bootstrap modal:

 .ck.ck-balloon-panel {
        z-index: 1050 !important;
    }

Answer 4

I had the same issue. Fixed using the following thread. It saved me lots of time:

Twitter bootstrap problem with ckeditor dialogue in modal

Answer 5

In my case, the problem is related to modal structure which text area is located inside the this jQuery Dialog box that has tabindex attribute like below:

<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" id="modal">
   // text area is here in this modal body
</div>

By removing tabindex="1" you can change link textbox in Link Popup box in ckeditor.

Answer 6

Same issue here, but using other frameworks. In short I was using modal divs.

Then I found out that one of them had a tabindex attribute defined. Once I removed it CKEDITOR started working as expected.

No modal should have tabindex attribute defined.