Get CKEditor 5 to work in (modal) dialogs

Created on 12 April 2022, over 2 years ago
Updated 15 July 2024, 4 months ago

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.

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

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.

๐Ÿ› Bug report
Status

Fixed

Version

9.4

Component
CKEditor 5ย  โ†’

Last updated 39 minutes ago

Created by

๐Ÿ‡ซ๐Ÿ‡ทFrance Dom.

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024