Skip to content

Home

Jump to bottom Edit New page
Nathan Cox edited this page Jun 7, 2013 · 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 still only lightly tested, so be warned.

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">.

Setting Custom Editor Configs

You can give an editor it's own TinyMCE config via SilverStripe's HTMLEditorConfig system:

In your _config.php:

<?php
    $footerConfig = CustomHtmlEditorConfig::copy('footer', 'cms');
    $footerConfig->setOption('friendly_name', 'Footer Content');
    $footerConfig->setButtonsForLine(2, array());
    $footerConfig->setButtonsForLine(3, array());

The code above uses the CustomHtmlEditorConfig::copy() convenience method to make a duplicate of the "cms" config named "footer". You can also just use HtmlEditorConfig::get('footer') if you want to start from scratch. It then changes new config's friendly name and removes all buttons from the editor's second and third lines.

You then apply the new config to an HTMLEditorField like this:

<?php
// in getCMSFields()
$fields->addFieldToTab('Root.Footer', $footerField = new HTMLEditorField('FooterText', 'Footer'));
$footerField->setEditorConfig('footer');

If you don't specify a config for an HTMLEditorField it will fall back on SilverStripe's default behaviour of picking one with Member::getHtmlEditorConfigForCMS();

How It Works (Kind Of)

All HTMLEditorConfigs have to be output on page load: they don't get loaded via AJAX when you navigate around. An extension hooks into LeftAndMain::init(), loops over all the configs and outputs them into a javascript array keyed by identifier.

The HTMLEditorField's body class and config identifier are stored on the field as data- attributes. An extension gives the HTMLEditorField the setBodyClass() and setEditorConfig() methods for convenience.

Then, using the magic of Entwine, we override part of the javascript that instantiates TinyMCE. Instead of just applying the default config to each field it will see if the field has an editor id attribute and use that to pick a config from the array. Then it'll inject the body class into the config if necessary.

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