CK Editor 5 link url not focussing when inside modal
Hi
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 ! :-)
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
</div>
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("show.bs.modal", function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find(".modal-body").load(button.data("remote"));
});
Hi,
I've had the same issue.
you can find your joy here (a working example for link, even for table properties):
https://codepen.io/ckeditor/pen/vzvgOe
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
Hi,
Can you try to remove tabindex attribute from the modal ?
Regards.
