• Registered: 2012-09-15
  • Posts: 1

Topic: Drupal CKEditor interaction with Juicebox, causes Juicebox Error

I embedded Juicebox into a Drupal page without any issues. But, when I go back and edit the page, the following occurs:

  • The edit screen shows up with the body section as plain text.

  • CKEditor kicks in, loads its toolbar, and changes the display to the rendered html

  • Juicebox throws the error Juicebox Error: Cannot find div with id: "juicebox-container" and greys out the screen

  • There's no way to go back to edit the html

I can avoid this issue by setting the editor to a type that doesn't use WYSIWYG, but that causes difficulties if I'm putting anything on the page in addition to the embedded slideshow.
Is there a way to avoid triggering the juicebox.js script too early when using it within a WYSIWYG editor?

Thanks.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Drupal CKEditor interaction with Juicebox, causes Juicebox Error

Is there a way to avoid triggering the juicebox.js script too early when using it within a WYSIWYG editor?

You can defer the loading of a JavaScript file until after the page has been parsed by adding the defer="defer" attribute to the <script> tag. However, doing so with the 'juicebox.js' file will break the Juicebox gallery, not only within your editor but also in all browsers.
The problem seems to be with CKEditor's rendering of the page (in that it does not seem to be able to find the 'juicebox-container' <div> which, presumably, is included in your embedding code).
If you are currently using the baseUrl method of embedding, try switching to using an <iframe>, documented as Step #2 here, to see if this makes a difference. Conversely, if you are currently using an <iframe>, try the baseUrl method instead.