Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

CK Editor 5 link url not focussing when inside modal


I have an issue when using CKEditor 5 inside a modal - in that the link URL field doesn't get focus, so I can't type in the link.

I've read issues online but cannot seem to resolve.

Assistance would be great ! :-)

Text formatting options

Replies (7)

Ok - I managed to sort this, after much searching and head scratching.

First - the CSS :

inside the body element (not root)

--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 999 );

then, this css class

.ck-body-wrapper{ z-index: 1300 !important;}

then - the CK editor element needs to be inside a new div

<div class="ck-body-wrapper">
in here

Someone make a statue to this person! <3

Thank you for sharing your solution. We will check this further and add Modal samples for CKEditor in the documentation. Appreciate your contribution!

I've tried most things and still can't seem to get this to work.
This is the code I use to invoke the modal.

added to css :
--ck-z-default: 100 !important;
--ck-z-modal: calc( var(--ck-z-default) + 999 ) !important;

I've tried removing tabIndex.

The link box now pops up, where it didn't before - but I cannot seem to type into the link field - another input field within the modal window keeps or steals focus.

$("#edit-modal-lg").on("", function (e) {
var button = $(e.relatedTarget);
var modal = $(this);


I've had the same issue.

you can find your joy here (a working example for link, even for table properties):

Thanks. I'm using the standard CK5 editor (as opposed to the balloon) - but I can now get the link dialogue to appear, but still not able to focus on the link url field itself - it keeps focussing on another input field on page.

Strange one


Can you try to remove tabindex attribute from the modal ?


Text formatting options
Text formatting options