This was the first thing I noticed when trying out SilverStripe and it nearly drove me nuts, not being able to center an image... I can edit the HTML easily but no editor I know could. I modified the code in the place pinkdigital mentioned so that the div is only inserted if a caption is actually written. If there's no caption just the img tag gets inserted. Here it is:
/**
* Insert an image with the given attributes
*/
ssInsertImage: function(ed, attributes, cssClass, withCaption) {
el = ed.selection.getNode();
var imageContainerClass = withCaption ? 'captionImage' : 'image';
var imgOnly = '<img id="__mce_tmp" />';
var imgDivv = '<div style="width: ' + attributes.width + '" class="' + imageContainerClass + ' ' + cssClass + '"><img id="__mce_tmp" />';
var captDiv = '<div style="width: ' + attributes.width + '" class="caption">' + attributes.title + '</div>';
if(withCaption && attributes.title != "") {
html = imgDivv + captDiv;
html += "</div>";
}
else{
html = imgOnly;
}
It is still not perfect as a captioned image can still not be positioned away fron left-aligned but it's a start. One would probably only have to to add a surrounding div that's set to 100%. I'll give it a try later and see if that works.
Regards.