plugin.js causes CKEditor to hang [#2208567]

Environment is Clean local MAMP install with Drupal CKEditor 7.x-1.13
[Note: I've also done the same tests on a remote LAMP server with same issue appearing, so I hope that makes my local MAMP environment less suspect! ;-) ]

Browsers: can repro in latest Firefox, Chrome and Safari
Have tried with latest Standard CKEditor library and config.allowedContent = true;
Have tried with older (3.x) CKEditor library.

1. With no additional modules except CKEditor enabled, add a new node, set to use Full HTML text format.
Click on CKEditor's IMAGE icon --> image dialog comes up (as expected)

2. Enable Picture 7.x-1.2 (and dependencies)

3. Open CKEditor's "Full" profile (admin/config/content/ckeditor/edit/Full)
Tick "Support responsive images with the Picture module"
Save the profile

4. Add another new node, set to use Full HTML text format.
Click on CKEditor's IMAGE icon --> no image dialog box appears, but screen dims and freezes up as if it was about to display one.

Firefox console output:

TypeError: Drupal.settings.picture is undefined 
plugin.js:64

Safari's console output:

[Error] TypeError: 'undefined' is not an object (evaluating 'Drupal.settings.picture.label')
	(anonymous function) (plugin.js, line 64)
	i (ckeditor.js, line 10)
	(anonymous function) (ckeditor.js, line 12)
	dialog (ckeditor.js, line 514)
	openDialog (ckeditor.js, line 560)
	(anonymous function) (ckeditor.js, line 561)
	o (ckeditor.js, line 214)
	q (ckeditor.js, line 214)
	s (ckeditor.js, line 214)
	(anonymous function) (ckeditor.js, line 215)

Chrome's console output:

Uncaught TypeError: Cannot read property 'label' of undefined plugin.js?t=DBAA:64
(anonymous function) plugin.js?t=DBAA:64
i ckeditor.js?n1sinp:10
CKEDITOR.event.CKEDITOR.event.fire ckeditor.js?n1sinp:12
CKEDITOR.dialog ckeditor.js?n1sinp:514
CKEDITOR.tools.extend.openDialog ckeditor.js?n1sinp:560
(anonymous function) ckeditor.js?n1sinp:561
o ckeditor.js?n1sinp:214
q ckeditor.js?n1sinp:214
s ckeditor.js?n1sinp:214
(anonymous function) ckeditor.js?n1sinp:215

Comment	File	Size	Author
#26	fix-ckeditor-hanging-on-configuration-miss-2208567-26.patch	904 bytes	junaidpv
#26

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

frost CreditAttribution: frost commented 2 March 2014 at 09:42

Issue summary:

View changes

Note: I can't tell if this is a Picture or CKEditor issue, if anyone can advise how I could narrow the causes of this more, I'd appreciate it.

Comment #2

frost CreditAttribution: frost commented 2 March 2014 at 13:33

Issue summary:

View changes

Comment #3

attiks CreditAttribution: attiks commented 5 March 2014 at 21:44

Version:

7.x-1.2

» 7.x-1.x-dev

Did you try the latest dev version?

Comment #4

inescubo CreditAttribution: inescubo commented 6 March 2014 at 11:38

Same issue, did you solve it?

Comment #5

attiks CreditAttribution: attiks commented 6 March 2014 at 12:03

Did you define picture mappings?

Comment #6

frost CreditAttribution: frost commented 6 March 2014 at 12:17

@attiks Re: Dev, I assume you are talking specifically about the dev release of the Picture module? I think I tried it in Dev, but unfortunately can't remember, since I was trying various combinations of releases of Ckeditor module, Ckeditor library, Picture, Breakpoints etc.

I know that I followed the "Note for CKEditor 4.1+ users" on the CKEditor module page when using the latest CKEDitor library release, but also tried an older library release.

Re: Picture Mappings, I following instructions on Picture docs page.

@inescubo No, I ran out of time on that project, so I went with responsive images & styles instead. Would prefer to use Picture etc but used up too much project time trying to solve this issue already.

If I have time after my current project I will try to repro this again using Dev of Picture module and will update this issue with full details of the versions of relevant modules and the steps to repro the issue.

Comment #7

frost CreditAttribution: frost commented 10 March 2014 at 18:05

Ok I've set up a new test environment and tried this again. I can repro this issue with a very plain Drupal setup:

I'm using the latest full release of all modules, except that I'm using the latest dev of Picture
Using latest CKEditor standard library (ckeditor_4.3.1_standard.zip)

1. Log in as Admin
2. Enable Picture, CTools, Breakpoints, CKEditor (I'm also enabling Admin menu and Module filter, but nothing else)
3. Test:
Add Content/Article
Change text format to Full HTML.
In Body area, click on Image icon. All is normal.

4. Go into CKeditor configuration for the FULL profile (admin/config/content/ckeditor/edit/Full)
Under Editor Appearance, you will note that "Support responsive images with the Picture module" is already ticked
DON'T CHANGE ANYTHING but SAVE the configuration.

5. Test again: Add Content/Article
Change text format to Full HTML.
In Body area, click on Image icon. The screen locks up
Firefox console says "TypeError: Drupal.settings.picture is undefined"

6. Now remove Picture support from CKEditor config:
Go into CKeditor configuration for the FULL profile (admin/config/content/ckeditor/edit/Full)
UNTICK "Support responsive images with the Picture module"
SAVE the configuration

7. One last Test:
Add Content/Article
Change text format to Full HTML.
In Body area, click on Image icon. All is normal.

So it seems to me there are 2, probably unrelated, issues here:
1. The setting "Support responsive images with the Picture module" is initially not enabled in the database but appears to be enabled from the UI.
2. When the setting is correctly enabled, we get the broken IMAGE icon behaviour previously described.

Comment #8

dflitner CreditAttribution: dflitner commented 11 March 2014 at 23:08

I'm also seeing this behavior (broken Image icon). I've tried with release versions of CKEditor & Picture, dev version of both, and release CKEditor and dev Picture. The behavior is the same in all versions.

Chrome says: "Uncaught TypeError: Cannot read property 'label' of undefined" in line 63, column 1

            // Add the select list for choosing the image width.
            infoTab.add({
              type: 'select',
              id: 'imageSize',
              label: Drupal.settings.picture.label,
              items: Drupal.settings.picture.groups,
              'default': 'not_set',
              onChange: function() {
                var dialog = this.getDialog();

Comment #9

frost CreditAttribution: frost commented 26 March 2014 at 21:16

Issue summary:

View changes

Comment #10

frost CreditAttribution: frost commented 8 April 2014 at 08:42

Anyone able to solve this? I'm stuck using resp_img until this is working :-(

I'm happy to work with anyone who's trying to resolve this; can supply more debugging info if you tell me what you need.

Comment #11

yingtho CreditAttribution: yingtho commented 16 April 2014 at 11:50

Workaround:
You need to start add breakpoints and then breakpoint groups for the breakpoints you have created. You also need to add some image styles. Then you can see the the breakpoint group in admin/config/media/picture. Click on the group to edit the settings and save the settings.
After that you have to the CKEditor tab to change the settings enable it for CKEditor. Now CKEditor will open without error.

Comment #12

frost CreditAttribution: frost commented 17 April 2014 at 12:28

Thanks for that @yingtho. I tried as you suggested, and also had to edit the Picture CKEditor settings here:
/admin/config/media/picture/ckeditor

Once I did that (I just ticked the box to include my picture group), the Image dialog worked, and allowed me to choose my image style group.

This is a usable workaround.

(I'm leaving status as it is, since this is still a bug)

Comment #13

attiks CreditAttribution: attiks commented 5 June 2014 at 07:42

Status:

Active

» Closed (works as designed)

Comment #14

hmartens CreditAttribution: hmartens commented 17 October 2014 at 06:56

You can't close this issue because someone found a work around...it's not "works as designed"...

I'm also having the exact same issue...please help.

Comment #15

Jelle_S

Dutch

Antwerp, Belgium

CreditAttribution: Jelle_S commented 17 October 2014 at 07:09

Status:

Closed (works as designed)

» Active

Thanks for that @yingtho. I tried as you suggested, and also had to edit the Picture CKEditor settings here:
/admin/config/media/picture/ckeditor

Once I did that (I just ticked the box to include my picture group), the Image dialog worked, and allowed me to choose my image style group.

This is a usable workaround.

(I'm leaving status as it is, since this is still a bug)

These steps should work for now. The plugin needs at least one group enabled for ckeditor. We'll look for a solution.

Comment #16

hmartens CreditAttribution: hmartens commented 17 October 2014 at 07:14

Thanks I'll try and also imlement this workaround and see how it goes.

Appreciate the help!

Comment #17

andrew smith CreditAttribution: andrew smith commented 13 January 2015 at 16:45

This is not a workaround so much as a glaring omission in the documentation; to clarify...

...go to admin/config/media/picture/settings - providing you've set up a picture mapping as per the instructions - and tick "include [picture mapping name] in the CKEditor image dialog", otherwise the image button won't work.

Comment #18

Renee S CreditAttribution: Renee S commented 10 February 2015 at 21:56

Thanks, @andrew smith, this indeed did it for me. Siiigh :)

Comment #19

Rob de Koter CreditAttribution: Rob de Koter commented 1 March 2015 at 23:16

Thank you yingtho and Andrew Smith I was getting desperate.
I used the Picture module a few times, I will try to make a YouTube video explaining how to set up the picture module next week.

Comment #20

frost CreditAttribution: frost commented 2 March 2015 at 11:13

FYI, I put up a three part screencast about a year ago explaining how to set this up. Forgot to post link here, so here it is:

https://vimeo.com/92537789

Active

» Closed (fixed)

Comment #25

Chimos CreditAttribution: Chimos commented 23 February 2016 at 17:02

I ran up against this problem after upgrading to Picture 7.x-2.11 and used the work around to get it going. After that I did find pretty good documentation has been added here. I'm thinking this could be closed now.

I followed the steps in documentation, as suggested, but I still found them uncomplete and therefore they drove me to this issue. I missed those two points in the docs:

The one mentioned in #11: once the picture groups are set, you should go to, .../admin/config/media/picture/settings to see more settings of these groups related to ckeditor, and check the checkbox "Include xxx picture mapping in the CKEditor image dialog".
After doing this I can use the image dialog again and apply picture alignment and style to inserted images, and after saving the node everything works as expected. The problem is that to align and style the image, Picture module uses image attributes in inline html (data-picture-align and data-picture-mapping), and when editing again that node, ckeditor content filter deletes those attributes at some point.
To avoid that:
1. go to ckeditor settings and edit the text format you are using to insert images, e.g. "Full" (.../admin/config/content/ckeditor/edit/Full).
2. Inside "Advanced content filter", add what you want ckeditor filter to allow in the field "Extra allowed content", in this case, I added
  img [ data-picture-align, data-picture-mapping ];
  to allow those two attributes for img tags.