Media v1 inline tokens are broken when WYSIWYG editor can alter CSS class. Solution for CKEditor

Media 7.x-1.x uses special CSS classes to manage what images it controls when a WYSIWYG editor is being used. The problem is. The editor can mess with these important CSS classes in various ways. For example CKEditor has two places I know of where a user can accidentally mess up the Media token generation: The style list and the image dialog. If the Media classes are removed then the Media token will fail to generate and the image will become a permanently inline HTML tag.

The style selector when used will completely replace all CSS classes on the selected element. This is by design but it means the user will destroy the Media classes.

The image dialog allows settings the class in the advance tab. This is a bigger problem because one can remove the attribute classes but leave the 'media-image' class behind. media-wysiwyg.js makes the assumption that any element with a class of 'media-image' will have the other attribute classes and thus crashes when they are not present. Leaving the user with a non-functioning editor.

I've created a small module that overrider some of the functions in CKEditor 4 image dialog and stylescombo plugins. These tweaked functions will detect and preserve the important Media classes while allowing the user to safely use those plugins. This means you can create CKEditor styles that float elements or do anything else without having to use inline styles. Allowing the developer and designer to better control the formatting without content authors screwing everything up :)

Although I've tested with CKEditor 4 this may actually work with 3 and if it does not I don't think it would need much adjustment.

Note that Media 2 is changing how the WYSIWYG integration works so these issues are at least partially resolved as it looks like Media 2 now uses HTML 5 data attributes for the media attributes but it still relies on the element having a first CSS class 'media-element'. However that is still very unstable and this allows the current stable Media 1 to be used with WYSIWYG CKeditor without modification. This method may also have better browser compatibility as well as I'm not sure how well older browser's will function with HTML5 data attributes.