Just an FYI. I'm using CKeditor library 4.0.1. Not sure if this happens with other versions of the Ckeditor library.

After I insert a media item the markup looks correct, but when I select the inserted media item(an image in this case) and choose a style(like media-right) from the style dropdown it garbles the media module's markup.

This doesn't happen when I try the same thing with TinyMCE 3.5.8.

I'm not sure what is causing this problem? I just wanted to post this here in case it sounded like a problem with the wysiwyg module.

Feel free to close this issue if it is CKeditor specific.

FYI.. I'm using the media-2.x-dev and file_entity-2.x-dev

Comments

Status:Active» Closed (duplicate)

Status:Closed (duplicate)» Active

Reopening to add more information.

I know it sounds similar, but I'm not sure that is quite the same. Ckeditor 4.1 introduces the ACF which strips the media tags. I'm using the Ckeditor 4.0.1.

In my case I could insert the media item and save the node and the markup looked fine.

It wasn't until I edit the node and choose a style from the style dropdown in ckeditor that it would then garble the media markup. In my case I have styles for media-left, media-right, media-center for adding a class to align the media item.

It caused me quite a bit of pain, because I had to go through the entire site and reinsert and link all media items. I didn't know there was a problem because even with the media tags messed up it was still displaying the media item correctly. It wasn't untill I needed to change an image style to make the images smaller that I noticed the images weren't changing size. When I inspected the markup I noticed it didn't look correct.

Hopefully that helps explain the problem. Correct me if I'm still wrong, but I think this is a separate issue.

Ah, thanks for the update gmclelland, it indeed sounds like a separate issue and I apologize for getting a little duplicate-happy.

I have not looked into the details of this yet, but I think I can make a decent guess based on what I remember from the last time I looked through Media's editor plugin. Media finds (image) elements inserted by itself into the editor based on, amongst other things, which classe(s) they have. When it finds an element it recognizes, it examines a custom data-something attribute in that tag and extracts the "filtertag" from it. If that custom data-* attribute is simply missing (like in 4.1 with ACF), a false replaces the element instead of the expected [[media...]] filtertag. But even if the attribute exists, the plugin may not be able to recognize the placeholder image element used in WYSIWYG mode, at which point the actual placeholder will remain after the editor has been detached. If the media is a simple image, you probably won't notice much difference when the node is viewed, except perhaps for missing captions or other decorations not currently visible inside the editor. If the media is a movie or other element which just use a generic image placeholder in WYSIWYG mode, you'd see that placeholder when viewing the node.

If you can't manually alter the markup of the placeholder so Media recognizes it again, you'll have no choice but to re-insert it and hope it genereates a recognizable placeholder element.

I haven't confirmed this is the actual thing happening, but it's a possibility since it's something I'm trying to deal with in TinyMCE 4 as well (they too introduced a new filtering process which requires that all attributes used by an element exist in a whitelist, unless completely disabled).

I encountered this just now (with ACF off) and think I've got a workable if somewhat complicated solution, assuming it's the same problem which seems likely.

When you apply a class based style to a media element in the wysiwyg editor, it replaces all classes on that element with those specified by the ckeditor style. This operation occurs on the preview html.

As TwoD points out, media uses a class "media-element" to attach to nodes in the wysiwyg html. Here's what the code looked like in 7.x-2.x-alpha3. Note: It's been refactored in 2.x-dev and I haven't checked it out yet.

http://drupalcode.org/project/media.git/blob/c611130f59d8326be5e0ba5e9fb...

isNode: function(node) {
  return $(node).is('img.media-element');
},

So when ckeditor adds the alignment class (and removes the media-element class), it's effectively detaching the media handler. The result is that you are left with the preview html which may often look correct but is totally disconnected from media.

A fairly easy solution is to add media's classes to your alignment classes. Here's what mine currently look like.

WYSIWYG Profiles > Ckeditor Profile X > CSS > CSS Classes

Float Left=img.media-element filemedia float-left
Float Right=img.media-element filemedia float-right

So our float right style includes both a "float-right" class and the "media-element" class. This appears to keep media properly attached in wysiwyg. However, there's at least two problems with this approach.

One is that there are normally display style classes in there as well. IE. we have different styles for large, medium, small, etc. You can't add the displays as options in the ckeditor style list (left large, left medium, left small) as it won't change the actual src path for the image. So this probably means leaving out the display style classes from the ckeditor style options. I think we're planning on styling the preview using regex attribute css selectors and the preview img src path which should work for us but might not work for everyone.

The other problem with this approach is that if you insert any images not through media, and you align them, media will try to claim them leaving you with no image at all. So this only works if all your img's come from media.

Issue summary:View changes

Applying styles to media elements within wysiwyg is very tricky and very buggy. Tried a bunch of different wysiwyg-settings, file-styles, formatters and editors. And it is even more tricky if you are using lightbox or shadowbox formatters. So I looked for another approach:

  1. The Shadowbox formatter creates a class with the name of the image style used within your file style setting. So I create an image style 'embed left'
  2. I create a file style called 'embed_left' with the formatter 'Shadowbox' applying the image style 'embed left'
  3. Within the editor a embed an image trough the media plugin applying the newly created style 'embed left'

The shadowbox image now has the class 'image-embed_left'. Just give some attributes to the class in your css and in the editor.css (for preview) like float:left. Done.