I am currently looking into running CKEditor in a modal dialog using the Drupal Modal API.

At this moment it is working OK, but there is a problem with the link and image modals which can be triggered from the CKEditor interface. Those also use the Modal API and when triggering one of these functions, the modal containing CKEditor is fully closed.

Is there any way to open de link/image modal without closing the CKEditor modal? It seems like it is possible to define the HTML element to which the modal should append when triggering. When overriding this setting ('appendTo' => '#foo'), even the link/image modals are appended to #foo (instead of the default '#drupal-modal').

Any ideas on how to get this to work?
Thanks for your support.

Comments

vollepeer created an issue. See original summary.

Wim Leers’s picture

Title: Use of CKEditor in a modal » Nested modals don't work: when using CKEditor in a modal, then clicking the image button opens another modal, which closes the original modal
Component: ckeditor.module » ajax system
Issue tags: +JavaScript

This is really about nesting of modal dialogs. I'd swear there is an issue for this, but I can't find it.

droplet’s picture

Component: ajax system » ckeditor.module
Category: Support request » Task

hmm....It seems we can improve it by changing CKEditor dialog to a unique ID. Any thoughts @WimLeers / maintainers?
https://github.com/drupal/drupal/blob/8.2.x/core/misc/dialog/dialog.ajax...

Wim Leers’s picture

Component: ckeditor.module » ajax system

This is a generic problem. What if something triggers a modal while already within a modal? That should work. This is not at all CKEditor-specific.

vollepeer’s picture

Indeed, same goes for the link modal.

Wim Leers’s picture

@vollepeer: can you explain that a bit?

Wim Leers’s picture

Oh, now I found that issue I was looking for in #2 — turns out @vollepeer was the one who opened it! It's #2737319: Opening a modal from inside another modal (nested modals), I marked it as a duplicate of this issue.

vollepeer’s picture

Sorry about the duplicate issue Wim :-)
Ignore my comment about link dialog: it is also in the context of CKEditor (image dialog + link dialog).

Indeed it relates to modals in general. However, like Droplet mentions, the modals triggered using the Drupal 8 Modal API seem to all be using the same parent HTML element. That wouldn't be an issue if new modals were attached to the element. But it seems like before opening a new modal, existing modals (if any) are cleared/destroyed.

Wim Leers’s picture

Hah, no worries :) Can be confusing/overwhelming to find your way through the Drupal core issue queue :) Hopefully my triaging helps.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

jrockowitz’s picture

I have ran into this issue with the YAML Form module's UI where I am relying on modals.

Below is an animated GIF documenting my issue.

It is worth noting that the Token module's dialog does not replace the YAML Form module's dialog because the Token module is opening a dialog and not a modal.

droplet’s picture

Considered the BC, I thought it should be opt-in (to open another Modal) than opt-out (close old instance).

Instance A:
In general, by design. If I make a module and expected anything working inside a Modal. I will set a unique ID for the dialog (It's already supported in CORE, like the Token does)

Instance B:
In another case, take the CKEditor as example, I'd thought:

B1. If we designed the CKEditor buttons Modal always pop up to TOP layer and hidden all other elements. Then, other modules should listen to its callback and restore the old windows.

B2. If we designed the CKEditor buttons worked inside Modal BY DEFAULT, then we should create a unique ID for the CKEditor buttons dialog.

Personally, with CKEditor example, I preferred B2. Just like what the Token does in above screenshot.

Instance A & B have no conflicts, it can be done at same time.

Let me know if I'm missing some important points. :)

vaplas’s picture

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

ivanjaros’s picture

Damn, I just found this issue myself http://drupal.stackexchange.com/questions/226980/image-upload-replaced-m...
Can't we use dialog instead of modal for the image?

Cauliflower’s picture

This issue is also related to this one: #2836043 (https://www.drupal.org/node/2836043)

ivanjaros’s picture

Category: Task » Bug report

Aaah, this goes for links as well. Like 50% of the buttons are unusable like this. If there would be modal form in the core that would use any of these it would be a major bug. Unfortunately it is not :(

droplet’s picture

Tagging 2 tags to see what their thoughts on these usages. (also on Comment #12)

"Single Modal all-time" vs "Nested Modal" vs "BOTH"