Ckeditor5: CKEditor + Magnific Popup. Link editing does not work

[DarkRiDDeR]

🐞 Bug report

💻 Version of CKEditor ckeditor5 10.1.0

Hello. Link editing does not work. How can I solve this problem?

Example https://codepen.io/anon/pen/vaEBKe

[Mgsy]

I can confirm that link editing doesn't work in modals. @dkonopka, you had a similar problem with the bootstrap modal, right?

[dkonopka]

Yes, it's true, here is Bootstrap 4 & CKE5 demo where after clicking link URL there is no way to edit or create a new one too.

Edit: working demo here: https://codepen.io/k0n0pka/pen/yqBXOz

[Reinmar]

I haven't debugged this issue, but with CKE4 we had to use a hack to stop Bootstrap from stealing focus from our controls: https://stackoverflow.com/questions/31678662/ckeditor-issue-with-bootstrap-modal/31679096

Most likely, a similar hack needs to be developed to make CKE5 work in Bootstrap and other libraries which provide modals.

[Reinmar]

And it's not a bug of CKEditor 5, so I'm re-labeling this to a question.

[DarkRiDDeR]

Thank you. Solution:

$.magnificPopup.instance._onFocusIn = function(e) {
  if( $(e.target).hasClass('ck-input') ) {
     return true;
  } 
  $.magnificPopup.proto._onFocusIn.call(this,e);
};

[dkonopka]

FYI: for bootstrap 4 there are two ways to solve "stealing focus":

1) Set modal option focus to false: https://getbootstrap.com/docs/4.1/components/modal/#options
2) $.fn.modal.Constructor.prototype.enforceFocus = function () {};

[ytliuSVN]

I am unable to edit links on CKEditor. The Link dialog window was covered by the Bootstrap modal.

Here is what I try so far:
https://jsfiddle.net/ytliuSVN/ox8hvs1w/

Any help would be appreciated!

[dkonopka]

@ytliuSVN You have to handle z-index collision and bootstrap focus issue.

Take a look here: https://codepen.io/k0n0pka/pen/yqBXOz

[Reinmar]

@dkonopka, your codepen isn't complete. Z-index is fixed, but there's still a focus problem:

[dkonopka]

☝️ I've updated demo, it's working now (I mean stealing focus problem).

[lcetinsoy]

Hello all ! Thanks for the answers, does someone knows how to fix this problem but with materializecss who does not have any "focus" option ?

I have put the z-index in css and the link input is shown but I can't edit it.

[edit] : when I try to manually focus with Jquery on the link input it does not work sadly : the input is still shown but I cannot enter any value in it

Best Laurent

[oleq]

@lcetinsoy If the library causes the issue and provides no configuration, I'm afraid there's hardly anything we can do to help you out. It's the problem of the library, not CKEditor 5.

Check out this article, maybe you'll figure out what exactly happens when the focus is stolen. You could then fork the library and implement some mechanism that prevents that.

[dkonopka]

@lcetinsoy We've created a demo with Materialize.css, it's all about dismissible: false option.

[riajha1]

I am unable to edit link in modal pop using angular -- import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

please help !

[riajha1]

I am unable to edit link in modal pop using angular -- import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
please help !
@Reinmar @lcetinsoy
@nicolasiac @oleq @dkonopka @dkonopka @Reinmar @ytliuSVN @dkonopka @ytliuSVN

[nicolasiac]

Does not work when ckeditor is in popup! You need to create a custom popup, by just creating a div that is on top of the rest of your application (z-index) and place the ckeditor inside that.

[codythecoder-teslagovt]

For those with React + CKEditor 5 and using reactstrap/bootstrap modals:

1. set autofocus on your modal to false:
   <Modal autofocus={false} ...>
2. add the following styling:
   :root { --ck-z-default: 100; --ck-z-modal: calc( var(--ck-z-default) + 999 ); }

read more here

[reddyCe]

For BootstrapVue users:
Add the 'no-enforce-focus' prop on the modal and set the z-index of .ck-balloon-panel to a value greater than your modal's z-index.