Skip to main content

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

Customising the CMS /

different tinyMCE content editors should have different typography styles


Reply


2 Posts   2928 Views

Avatar
rsouthgate

Community Member, 10 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:

<body id="tinymce" class="mceContentBody typography" dir="ltr">

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?

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