Home

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)

Files

A quick guide to the files included so you know what's what:

CustomHTMLEditorField.php

The CustomHTMLEditorField is a subclass of HTMLEditorField and is used in the same way. Note that it's not actually NEEDED by this module but it provides tidier methods

CustomHTMLEditorConfig.php

This is a subclass of HTMLEditorConfig for technical reasons but is actually used to "wrap" an HTMLEditorConfig to provide extra methods used for handling multiple configs.

CustomHTMLEditorField.js

This needs to be included on any page using custom configs or body classes. It overwrites the code that applies TinyMCE to an htmleditor and adds some extra logic.

CustomHTMLEditorField.js is included automatically by CustomHTMLEditorField and CustomHTMLEditorConfig::requireJS(), but if neither of those is being used you can require it manually in getCMSFields():

Requirements::javascript('customhtmleditorfield/javascript/CustomHTMLEditorField.js');

Setting Custom Body Classes

Custom body classes are added to the

tag in the HTML editor (along with the default "typography" usually), letting you style different editors to match the part of the site they're editing.

All we're basically doing is adding a data- attribute to the form field then using JavaScript to append that attribute's value to the TinyMCE config's body_class property.

You can do it one of two ways:

With a Regular HTMLEditorField:

On a regular HTMLEditorField you set the data-body-class attribute:

<?php
// in getCMSFields()
Requirements::javascript('customhtmleditorfield/javascript/CustomHTMLEditorField.js');

$fields->addFieldToTab('Root.Footer', $footerField = new HTMLEditorField('FooterText', 'Footer'));
$footerField->setAttribute('data-body-class', 'test');

With a CustomHTMLEditorField:

CustomHTMLEditorField has a slightly nicer looking convenience method:

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

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{
    background:#000000;
    color:#FFFFFF;
}

Using Custom Editor Configs

This module allows to you create multiple HTMLEditorField configs and assign them to different HTMLEditorFields on the same page.

The way it works is that by default HTMLEditorField assigns the currently active HTMLEditorConfig to the ssTinyMceConfig javascript variable, which is used to configure all the HTML editors. This module creates another javascript variable (customTinyMceConfig) as an associative array and fills it with config objects. The javascript then uses a data-attribute on the HTML editor to determine which config to use, falling back to the default ssTinyMceConfig if none is set.

Again there are two ways to do it:

CustomHTMLEditorField:

You can assign a config to CustomHTMLEditorField by just passing it's identifier to the CustomHTMLEditorField::setEditorConfig() method:

<?php
// in getCMSFields()

// this method makes a new config called "footer" by copying the existing "cms" config.  See more below.
$footerConfig = CustomHtmlEditorConfig::copy('footer', 'cms');
$footerConfig->setOption('friendly_name', 'Footer Config');
// remove the third row of the editor toolbar: no tables in the footer!
$footerConfig->setButtonsForLine(3, array());

$fields->addFieldToTab('Root.Footer', $footerField = new CustomHTMLEditorField('FooterText', 'Footer'));
$footerField ->setEditorConfig('footer');

Regular HTMLEditorField:

You can assign a config to a regular old HTMLEditorField too, but you need to manually set the data-config-id attribute and include the javascript. CustomHTMLEditorConfig provides a convenience method to do that:

<?php
// in getCMSFields()

// this method makes a new config called "footer" by copying the existing "cms" config.  See more below.
$footerConfig = CustomHtmlEditorConfig::copy('footer', 'cms');
$footerConfig->setOption('friendly_name', 'Footer Config');
// remove the third row of the editor toolbar: no tables in the footer!
$footerConfig->setButtonsForLine(3, array());

$fields->addFieldToTab('Root.Footer', $footerField = new TMLEditorField('FooterText', 'Footer'));
// set the data attribute to tell the JS which config to use
$footerField->setAttribute('data-config-id', 'footer');
// include the footer config's required JS
CustomHTMLEditorConfig::get('footer')->requireJavascript();

Extras

Copying Configs

Normally when you make a new HTMLEditorConfig it gets populated with default settings which are different from the standard CMS settings used in SilverStripe. I find I usually want to base new configurations off the regular CMS ones rather than HTMLEditorConfig's defaults. This module provides a convenience method for doing that, which was demonstrated in the code above.

<?php
$footerConfig = CustomHtmlEditorConfig::copy('footer', 'cms', 'Footer content config');

This creates and returns a new config object with all the same properties as an exising one, and can be used in the same way as HTMLEditorConfig::get();

The first parameter is the ID of the new config (in the example above this config could be fetched later with HTMLEditorConfig::get('footer')).

The second parameter is the ID of the config you're copying. The default used in SilverStripe is "cms".

The third parameter is optional and it lets you set the friendly_name property. If you leave it out it uses the new config ID instead.