I've had this same problem...the only classes that get set on the body inside TinyMCE are .mceContentBody and whatever you pass to TinyMCE in it's 'body_class' option (which is set to "typography" in LeftAndMain.php).
You can apply classes to the textarea that TinyMCE is made from with something like
$editorField->setCSSClass('sidebarContent');
I had always thought that TinyMCE took any class names from the textarea and used them but apparently not. Has this changed in a recent version or was I just imagining it?
Anyway I've found two ugly work-arounds for this so far:
1) TinyMCE does support different styles for different values in the body_class parameter, so you can set it up manually:
in Page.php:
function getCMSFields() {
$fields = parent::getCMSFields();
// make an editor field for our sidebar content
$sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
$fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
// regular content editor just uses the typography class, sidebar content uses the "sidebarContent" class as well
// this needs to be here because it doesn't work from _config.php
HtmlEditorConfig::get('cms')->setOption('body_class', 'Form_EditForm_Content=typography,Form_EditForm_SidebarContent=typography sidebarContent');
return $fields;
}
2) You can use Javascript to find the name of the field and apply it to TinyMCE:
in Page.php:
function getCMSFields() {
$fields = parent::getCMSFields();
// make an editor field for our sidebar content
$sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
$fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
// include the javascript
Requirements::javascript('mysite/javascript/tinymceContentStyle.js');
return $fields;
}
tinymceContentStyle.js:
jQuery('.mceLayout iframe').livequery('load', function() {
var cssClass = jQuery(this).parents('div.field').attr('id');
jQuery(this).contents().find('body').addClass(cssClass);
});
2b) If you don't want to use the field name you can take advantage of HTMLEditorField's css class function with javascript:
in Page::getCMSFields():
$fields = parent::getCMSFields();
// make an editor field for our sidebar content
$sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
$fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
// regular content editor just uses the typography class, sidebar content uses the "sidebarContent" class as well
// this needs to be here because it doesn't work from _config.php
HtmlEditorConfig::get('cms')->setOption('body_class', 'Form_EditForm_Content=typography,Form_EditForm_SidebarContent=typography sidebarContent');
return $fields;
2) You can use Javascript to find the name of the field and apply it to TinyMCE:
in Page.php:
function getCMSFields() {
$fields = parent::getCMSFields();
// make an editor field for our sidebar content
$sidebarEditor = new HTMLEditorField('SidebarContent', 'Sidebar Content');
$sidebarEditor->setCSSClass('stylesForSidebar');
$fields->addFieldToTab('Root.Content.Main', $sidebarEditor);
// include the javascript
Requirements::javascript('mysite/javascript/tinymceContentStyle.js');
return $fields;
}
tinymceContentStyle.js:
jQuery('.mceLayout iframe').livequery('load', function() {
var classes = jQuery(this).parents('.middleColumn').find('textarea:first').attr('class');
var cssClass = jQuery.trim(classes.replace('htmleditor', ''));
jQuery(this).contents().find('body').addClass(cssClass);
});
So yes, messy and not thoroughly tested but do-able :)