EDIT: Please see the accepted answer above from Dylan as an approach for handling this type of functionality.
nonprofit_tech's suggestion to try using a custom style set does work, but it involves a two-step process: the content administrator must first add the custom wrapper from the style set dropdown, and then embed the media via the toolbar's media embed button. Again, this works, but places more of a burden on the administrator who may or may not be very tech savvy, and if you accidentally navigate outside of the empty wrapper element, you might not embed the media in the right place. Not an ideal solution, but here's a sample of the code that I wrote to test out that theory:
CKEDITOR.stylesSet.add('custom-styleset',[{
name: 'Embed Wrapper',
element: 'div',
attributes: {'class': 'inline-media'}
}]);
Another solution to this is to edit the minified ckeditor.js
, but this is not recommended by the folks at Pixel & Tonic, as this file would likely be overwritten by updating the plugin in the future.
However, if you really want to do this, you can add a line to that file to add a class to the element that wraps the embedded media. In the current build of the plugin, the code looks like this:
div=b.document.createElement("div");
div.setHtml(this.getContentElement("iframe","embedArea").getValue());
To which I added:
div.setAttribute("class","inline-media");
And the final code looked like:
div=b.document.createElement("div");
div.setAttribute("class","inline-media");
div.setHtml(this.getContentElement("iframe","embedArea").getValue());
Again, this is not recommended, as changes to this file will likely be overwritten if the plugin is updated in the future.
I think that a better solution to this issue will be to create my own embed button that replicates the functionality of the default embed button, but also wraps the embedded content in the markup that I need to have.