diff --git a/includes/media.filter.inc b/includes/media.filter.inc index 0f0a254..0164de7 100644 --- a/includes/media.filter.inc +++ b/includes/media.filter.inc @@ -131,28 +131,29 @@ function media_token_to_markup($match, $wysiwyg = FALSE) { $attribute_whitelist = media_variable_get('wysiwyg_allowed_attributes'); $settings['attributes'] = array_intersect_key($attributes, array_flip($attribute_whitelist)); - // Many media formatters will want to apply width and height independently - // of the style attribute or the corresponding HTML attributes, so pull - // these two out into top-level settings. Different WYSIWYG editors have - // different behavior with respect to whether they store user-specified - // dimensions in the HTML attributes or the style attribute, so check both. - // Per http://www.w3.org/TR/html5/the-map-element.html#attr-dim-width, the - // HTML attributes are merely hints: CSS takes precedence. - if (isset($settings['attributes']['style'])) { - $css_properties = media_parse_css_declarations($settings['attributes']['style']); - foreach (array('width', 'height') as $dimension) { - if (isset($css_properties[$dimension]) && substr($css_properties[$dimension], -2) == 'px') { - $settings[$dimension] = substr($css_properties[$dimension], 0, -2); - } - elseif (isset($settings['attributes'][$dimension])) { - $settings[$dimension] = $settings['attributes'][$dimension]; + if (!empty($tag_info['attributes']) && is_array($tag_info['attributes'])) { + $attribute_whitelist = media_variable_get('wysiwyg_allowed_attributes'); + $settings['attributes'] = array_intersect_key($tag_info['attributes'], array_flip($attribute_whitelist)); + + // Many media formatters will want to apply width and height independently + // of the style attribute or the corresponding HTML attributes, so pull + // these two out into top-level settings. Different WYSIWYG editors have + // different behavior with respect to whether they store user-specified + // dimensions in the HTML attributes or the style attribute, so check both. + // Per http://www.w3.org/TR/html5/the-map-element.html#attr-dim-width, the + // HTML attributes are merely hints: CSS takes precedence. + if (isset($settings['attributes']['style'])) { + $css_properties = media_parse_css_declarations($settings['attributes']['style']); + foreach (array('width', 'height') as $dimension) { + if (isset($css_properties[$dimension]) && substr($css_properties[$dimension], -2) == 'px') { + $settings[$dimension] = substr($css_properties[$dimension], 0, -2); + } + elseif (isset($settings['attributes'][$dimension])) { + $settings[$dimension] = $settings['attributes'][$dimension]; + } } } } - - if ($wysiwyg) { - $settings['wysiwyg'] = $wysiwyg; - } } catch (Exception $e) { watchdog('media', 'Unable to render media from %tag. Error: %error', array('%tag' => $tag, '%error' => $e->getMessage())); @@ -160,7 +161,20 @@ function media_token_to_markup($match, $wysiwyg = FALSE) { } if ($wysiwyg) { + $settings['wysiwyg'] = $wysiwyg; + // If sending markup to a WYSIWYG, we need to pass the file infomation so + // that a inline macro can be generated when the WYSIWYG is detached. + // The WYSIWYG plugin is expecting this information in the format of a + // urlencoded JSON string stored in the data-file_info attribute of the + // element. $element = media_get_file_without_label($file, $tag_info['view_mode'], $settings); + $data = drupal_json_encode(array( + 'type' => 'media', + 'fid' => $file->fid, + 'view_mode' => $tag_info['view_mode'], + )); + $element['#attributes']['data-file_info'] = urlencode($data); + $element['#attributes']['class'][] = 'media-element'; } else { // Display the field elements. diff --git a/js/wysiwyg-media.js b/js/wysiwyg-media.js index bbcaac0..152e469 100644 --- a/js/wysiwyg-media.js +++ b/js/wysiwyg-media.js @@ -8,153 +8,89 @@ Drupal.media = Drupal.media || {}; -// Define the behavior. +/** + * Register the plugin with WYSIWYG. + */ Drupal.wysiwyg.plugins.media = { /** - * Initializes the tag map. + * Determine whether a DOM element belongs to this plugin. + * + * @param node + * A DOM element */ - initializeTagMap: function () { - if (typeof Drupal.settings.tagmap == 'undefined') { - Drupal.settings.tagmap = { }; - } + isNode: function(node) { + return $(node).is('img.media-element'); }, /** * Execute the button. - * @TODO: Debug calls from this are never called. What's its function? + * + * @param data + * An object containing data about the current selection: + * - format: 'html' when the passed data is HTML content, 'text' when the + * passed data is plain-text content. + * - node: When 'format' is 'html', the focused DOM element in the editor. + * - content: The textual representation of the focused/selected editor + * content. + * @param settings + * The plugin settings, as provided in the plugin's PHP include file. + * @param instanceId + * The ID of the current editor instance. */ invoke: function (data, settings, instanceId) { if (data.format == 'html') { - Drupal.media.popups.mediaBrowser(function (mediaFiles) { - Drupal.wysiwyg.plugins.media.mediaBrowserOnSelect(mediaFiles, instanceId); - }, settings['global']); - } - }, - - /** - * Respond to the mediaBrowser's onSelect event. - * @TODO: Debug calls from this are never called. What's its function? - */ - mediaBrowserOnSelect: function (mediaFiles, instanceId) { - var mediaFile = mediaFiles[0]; - var options = {}; - Drupal.media.popups.mediaStyleSelector(mediaFile, function (formattedMedia) { - Drupal.wysiwyg.plugins.media.insertMediaFile(mediaFile, formattedMedia.type, formattedMedia.html, formattedMedia.options, Drupal.wysiwyg.instances[instanceId]); - }, options); - - return; - }, - - insertMediaFile: function (mediaFile, viewMode, formattedMedia, options, wysiwygInstance) { - - this.initializeTagMap(); - // @TODO: the folks @ ckeditor have told us that there is no way - // to reliably add wrapper divs via normal HTML. - // There is some method of adding a "fake element" - // But until then, we're just going to embed to img. - // This is pretty hacked for now. - // - var imgElement = $(this.stripDivs(formattedMedia)); - this.addImageAttributes(imgElement, mediaFile.fid, viewMode, options); - - var toInsert = this.outerHTML(imgElement); - // Create an inline tag - var inlineTag = Drupal.wysiwyg.plugins.media.createTag(imgElement); - // Add it to the tag map in case the user switches input formats - Drupal.settings.tagmap[inlineTag] = toInsert; - wysiwygInstance.insert(toInsert); - }, - - /** - * Gets the HTML content of an element - * - * @param jQuery element - */ - outerHTML: function (element) { - return $('