Using Drupal 8.1.1 and file_entity HEAD, I'm not able to use ckeditor inside the inline edit form. When clicking ckeditor buttons that have modals (like link button), the file entity form disappears, and the modal stops working.

Steps to reproduce:

  1. Install Drupal 8.1.8
  2. Install file_entity HEAD
  3. Configure the article content type > image field > editable file
  4. Add a new field with CKEditor to the Image File Type
  5. Create an article and add an image, then save
  6. Edit the article > click edit next to the image
  7. Attempt to use CKEditor to make a link

I've attached a video of the problem.

CommentFileSizeAuthor
#6 2787217-6.patch1.35 KBwebflo
#2 file_entity-ckeditor_broken-2787217-2.patch1.68 KBrocketeerbkw
#2 file_entity_ckeditor_fixed.mov7.54 MBrocketeerbkw
file_entity_ckeditor_broken.mov6.48 MBrocketeerbkw
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rocketeerbkw created an issue. See original summary.

rocketeerbkw’s picture

rocketeerbkw CreditAttribution: rocketeerbkw at Amazee Labs commented
Status: Active » Needs review
FileSize
file_entity_ckeditor_fixed.mov7.54 MB
file_entity-ckeditor_broken-2787217-2.patch1.68 KB

The attached patch switches from using a "Modal Dialog" to using just a "Dialog." It looks like in Drupal, the former is hard coded to only allow one Modal Dialog at a time, hence the ckeditor dialogs forcing the file entity form to close.

There are some styling issues that need to get fixed with this, but I haven't looked at that yet. I want to see if this breaks tests.

I've attached a video of it working, to compare against the broken one.

Status: Needs review » Needs work

The last submitted patch, 2: file_entity-ckeditor_broken-2787217-2.patch, failed testing.

The last submitted patch, 2: file_entity-ckeditor_broken-2787217-2.patch, failed testing.

rocketeerbkw’s picture

rocketeerbkw CreditAttribution: rocketeerbkw at Amazee Labs commented
Status: Needs work » Needs review

I couldn't duplicate test failures locally, so I re-ran the tests and they're green.

webflo’s picture

webflo CreditAttribution: webflo at UEBERBIT GmbH commented
FileSize
2787217-6.patch1.35 KB

Drupals default implementation of the Modal is bound the #drupal-modal ID (OpenModalDialogCommand and CloseModalDialogCommand) and CKEditor plugins use this one already. File Entity could implements own modal with a different id.

rocketeerbkw’s picture

rocketeerbkw CreditAttribution: rocketeerbkw at Amazee Labs commented

The problem is that two modals with the same ID can't co-exist. The latest one open wins. So if your file entity has a file field, then that would require two modals to be open at once. The patch in #6 doesn't allow that. That's why I used unique IDs for each modal in #2.

pminf’s picture

pminf
Primary language German
Location Nuremburg (Germany), formerly Dresden
CreditAttribution: pminf commented

I'm experiencing a similar problem, but not with ckeditor. I have multiple image fields with widget Editble File. When I open an image to edit it and close it by clicking save or X, I can not edit another one afterwards (even the same image). I get an "error message" on clicking save:
[{"command":"closeDialog","selector":"#file-entity-inline-edit-1440","persist":false}].

Clicking cancel has no effect at all, even on first click.

Both patch #2 and #6 did not solve this issue for me.

I must admit, that I can't reproduce this in a clean install. Any idea what's going wrong?

bighappyface’s picture

bighappyface CreditAttribution: bighappyface at Rackspace for Rackspace commented
Status: Needs review » Reviewed & tested by the community
Issue tags: +Texas Camp

+1 for #2

Reviewed in person with 27 other people at Texas Camp

BiigNiick’s picture

BiigNiick CreditAttribution: BiigNiick as a volunteer commented

+1 for #2 for me too

i think the solution of still hard-coding the modal title is not a very 'drupaly' way to fix this...

artis’s picture

artis CreditAttribution: artis at Texas Creative commented

+1 for patch #2 which solves the bug with ckeditor and accounts for any future issues with file entities that have file fields.
Code reviewed at Texas Camp.

brayfe’s picture

brayfe CreditAttribution: brayfe as a volunteer commented

+1 for #2.

Reviewed and confirmed that the patch in #2 is a functional way to have multiple dialogs open for the file entity. I agree that the original modal can be a basic Dialog box (vs modal), avoiding the conflict with CKEditor. Avoiding the hardcoded jquery selector in the OpenDialogCommand call ensures that there will not be future dialog/modal conflicts with other modules, core or contrib.

  • webflo authored d2b9b78 on 8.x-2.x 
    Issue #2787217 by rocketeerbkw, webflo: Inline edit form breaks with...
joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented
Status: Reviewed & tested by the community » Fixed

Fixed by Texas the Lone Star

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.