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 ! :-)

Text formatting options
Submit

Replies (6)

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 );

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>

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

Text formatting options
Submit
Text formatting options
Submit