JS error(s) with Media-7.x-2.0alpha4 and CKEditor

Question

I'm working on a production site that is using Media-7.x-2.0-unstable6, File entity-7.x-2.0-unstable6, and Wysiwyg-7.x-2.2 (with the CKEditor 3.6.3.7474 library installed). This is fine for inserting images into content types that have an image field, but I am attempting to upgrade Media to a more recent version that allows for WYSIWYG integration and insertion of images and other media directly into the body field.

I updated a local copy of the site to Media-7.x-2.0-alpha4 and File entity-7.x-2.0-beta1. Clicking on the "Add media" CKEditor button brings up the media browser in the normal way. Selecting an image and clicking on the "Submit" button brings up the "Embedding [filename]" dialog, but clicking on the "Submit" button does nothing. The firebug console shows TypeError: CKEDITOR.instances[this.field] is undefined in line 244 of /sites/all/modules/wysiwyg/editors/js/ckeditor-3.0.js (i.e. return CKEDITOR.instances[this.field].getData();).

I then disabled Wysiwyg and installed CKEditor-7.x-1.16. I still see the same behavior ("Submit" button does nothing), but now the JavaScript error is TypeError: Drupal.wysiwyg is undefined in line 45 of /sites/all/modules/media/modules/media_wysiwyg/js/media_wysiwyg.format_form.js (i.e. if (Drupal.wysiwyg.instances[field.key]) {).

I have disabled almost all contrib modules (except for those required by media and file_entity, and a few other innocuous ones that are required by some of the content fields), and the problem persists.

Since Media-7.x-2.0-alpha4, File entity-7.x-2.0-beta1, and CKEditor-7.x-1.16 on a Drupal 7 clean install work fine in my hands, I have a sneaky feeling that there may be cruft in the database that is screwing things up. However, my JavaScript is on the weak side, and I have no clue how Drupal and JavaScript interact, so I'm not sure where to even begin looking for the problem. Any hints on how I can solve this issue? (short of doing a complete rebuild of the site, which might not be a bad idea, actually...)

Thanks in advance!

Answer 1

For CKEditor: At first glance, it seems that commenting out the following lines in media/modules/media_wysiwyg/js/media_wysiwyg.format_form.js allows the button to work again...

      // Get all the values
      var ret = {};

      $.each($('#media-wysiwyg-format-form .fieldset-wrapper *').serializeArray(), function (i, field) {
        ret[field.name] = field.value;

        // When a field uses a WYSIWYG format, the value needs to be extracted.
        if (field.name.match(/\[format\]/i)) {
          field.name = field.name.replace(/\[format\]/i, '[value]');
          field.key  = 'edit-' + field.name.replace(/[_\[]/g, '-').replace(/[\]]/g, '');

//          if (Drupal.wysiwyg.instances[field.key]) {
//            // Retrieve the content from the WYSIWYG instance.
//            ret[field.name] = Drupal.wysiwyg.instances[field.key].getContent();
//            // Escape the double-quotes and encode it to play nicely within JSON.
//            ret[field.name] = encodeURIComponent(ret[field.name].replace(/"/g, '\\"'));
//          }
        }
      });


  return ret;

Be careful though, this is not a permanent solution as you should never hack core.