This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

different tinyMCE content editors should have different typography styles

2 Posts 4430 Views

rsouthgate

Community Member, 12 Posts

24 August 2009 at 12:41pm

I have multiple HTMLEditorFields on multiple tabs for one page. According to the documentation I should be able to style these differently:

-- from http://doc.silverstripe.com/doku.php?id=typography

If you would to include different styles for different sections of your site, you can use class names the same as the name of the data fields. This example sets up different paragraph styles for 2 HTML editor fieldsc alled Content and OtherContent:

.Content.typography p {
font-size: 12px;
}

.OtherContent.typography p {
font-size: 10px;
}

------

The ability to use class names that are the same names as the data fields implies that that class name would be passed through to the body of the iframe that tinyMCE renders in the editable region. yet regardless of which HTMLEditorField I inspect the body is always the same:

So these HTMLEditorFields all inherit the same styles which seriously limits what I would like to do. It seems like, since it's in the documentation, that it should be possible to have separate styles for each region but I can't figure out how - can anyone help?

Nathan Cox

Community Member, 99 Posts

28 August 2009 at 12:15pm

Edited: 28/08/2009 12:17pm

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 :)

Return to top