Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 299773

Get CKEditor 5 to work in (modal) dialogs

$
0
0

Problem/Motivation

CKEditor 5 uses tooltips named balloons to provide the configurable functionalities integrated with the editorial experience. For instance with adding a link, a sort of popup named balloon appear to let you configure the link.
CKE5 create link

This feature though is added of "canvas" in a div with the class ck-body-wrapper:
CKE5 offcanvas balloons

That result in the tooltip being missdisplayed (not visible at all) in CKEditor 5 within modals. Hence, the functionality not usable at all. This one, and all relying on those tooltips.

This is true for :
- CKEditor 5 used in textarea configured on views since views uses modals #2741187: Allow usage of WYSIWYG in views text area fields
- for people using Layout Paragraphs to build content
- for any textarea field in a form opened in modal mode
- for any other contrib or core module that would use textareas in modal and that I am not currently aware of

Steps to reproduce

You could apply / try patch here for instance, or use the layout paragraph module.

Proposed resolution

The modal is opened with a given z-index. For example in Seven it is z-index: 1260.
I suggest to apply the following CSS to the .ck-body-wrapper class :

position: fixed;
z-index: 1300;

However, with this trick, the input field still do not get the focus, which I don't know how to handle at the moment.
Demonstration as a gif


Viewing all articles
Browse latest Browse all 299773

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>