Skip to content

Home

Jump to bottom Edit New page
nathancox edited this page Jul 1, 2012 · 8 revisions

This module adds two features to HTMLEditorField in SilverStripe 3:

  1. it allows you to set a custom body class on each editor field (for styling the content differently)
  2. it allows you to assign different HTMLEditorConfigs to each HTMLEditorField (eg to have different toolbars)

This is basically done via an HTMLEditorField extension that lets you set attributes on the field and JavaScript that reads the attributes and chooses/adjusts the TinyMCE configuration before applying it.

Setting Custom Body Classes

Custom body classes are added to the

tag in the HTML editor, letting you style different editors to match the part of the site they're editing. 
<?php
// in getCMSFields()
$fields->addFieldToTab('Root.Footer', $footerField = new HTMLEditorField('FooterText', 'Footer'));
$footerField->setBodyClass('footer-content');

You can then style the content of that editor to match your theme's footer with something like this in your editor.css:

body.footer-content {
    background:#000000;
    color:#FFFFFF;
}

The body class is appended to the config's existing body_class property (usually "typography"). So $footerField->setBodyClass('footer-content content-box'); would produce <body class="typography footer-content content-box">.

Add a custom footer
Add a custom sidebar
Clone this wiki locally