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 ! :-)
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.
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"));
});
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 );
.ck-body-wrapper{ z-index: 1300 !important;}
<div class="ck-body-wrapper">
in here
</div>
Thank you for sharing your solution. We will check this further and add Modal samples for CKEditor in the documentation. Appreciate your contribution!