Conflict with ckeditor.js (wysiwyg_ckeditor) [#2532472]

I've had two clients so far who say they are unable to insert images after recent updates that included colorbox. To be perfectly clear, this functionally worked perfectly prior to this update.

Here's what we're running:

Drupal 7.38 (latest)
Colorbox 2.9 (latest)
Insert 1.3 (latest)
CKEditor (wysiwyg_ckeditor) 1.0-beta-1 (latest)
jQuery Update is not present

Steps to reproduce:

Add modules and configure a photo field to use insert.
Upload a photo.
Select an image style that uses colorbox.
Put your cursor in the WYSIWYG.
Click Insert.

The image does not display in WYISWYG and the following message appears in the js console:

Uncaught TypeError: Cannot read property 'remove' of null
(anonymous function)				@	ckeditor.js:324
CKEDITOR.editable.CKEDITOR.tools.createClass.proto.insertHtml @	ckeditor.js:300
(anonymous function)				@	ckeditor.js:306
i						@	ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire		@	ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fire		@	ckeditor.js:13
CKEDITOR.tools.extend.insertHtml		@	ckeditor.js:227
Drupal.wysiwyg.editor.instance.ckeditor_extended.insert	 @	ckeditor_extended.js:202
Drupal.insert.insertIntoActiveEditor		@	insert.js:136
insert						@	insert.js:106
c.event.handle					@	jquery.js:64
h.handle.o					@	jquery.js:57

When any other (non-colorbox) image style is used the image inserts normally and there is no error in the console. I'd be happy to debug further if you have any suggestions.

Thank you!

Comments

Comment #1

davidneedham

he/him

commented 13 July 2015 at 20:24

Issue summary:

View changes

Comment #2

davidneedham

he/him

commented 13 July 2015 at 20:34

I just tried rolling back colorbox to dev, then 2.8, then 2.7. No visible change. Maybe colorbox isn't responsible after all.

Comment #3

davidneedham

he/him

commented 13 July 2015 at 20:45

Comment #4

davidneedham

he/him

commented 13 July 2015 at 20:58

Issue summary:

View changes

I was just able to make the error go away and cause the button to work by downgrading colorbox to 2.5 (as per my comment a year ago at #2150665: Conflict with Colorbox insert integration and image-button on CKEditor).

However each image is only a link - it doesn't actually do the colorobox popup effect at all.

Comment #5

davidneedham

he/him

commented 13 July 2015 at 23:02

Title:

Conflict with ckeditor.js

» Conflict with ckeditor.js (wysiwyg_ckeditor)

Well, I still don't know exactly what the problem was, but it appears to be a conflict between colorbox and wysiwyg_ckeditor. I replaced it with regular ckeditor and the insert+colorbox+ckeditor seems to be working normally. This is still an issue for anyone using wysiwyg_ckeditor, so I'm going to go ahead and leave this issue open.

(Note: Some may not know that wysiwyg_ckeditor is NOT the same as wysiwyg with the ckeditor library or the ckeditor module. Each is it's own project and it's own way of implementing ckeditor.)