Customising the WYSYWIG editor in v2.3.2 (TinyMCE)

The  default install of SilverStripe contains an array of buttons for the TinyMCE HTML editor. However usually your client will need some extra functionality or you may want to keep things simple for them by removing some of the buttons. As of SilverStripe 2.3.2 this is very easy and can be achieved by adding some code to the _config.php file.

Note. if you are using a version <2.3.2 you must edit the file cms/javascript/tinymce.template.js.

To find out all the wonderful buttons that are available by default in the TinyMCE 3 install visit the example page here and click the 'view source tab'. There are also tons of plugins available to do all sorts of things.

Adding Buttons

So lets say for example you wanted to add font color settings to the editor. All you need to do is add this line to your class or _config.php file:
HtmlEditorConfig::get('cms')->insertButtonsAfter('formatselect', 'forecolor');

So this line will insert the font color button after the format select dropdown in the toolbar. Because font color ships with TinyMCe that's all there is to it! There are literally dozens of extra buttons you can add to your editor in this way, just check out the link above to see all the buttons that ship with TinyMCE.

Here are all the functions for adding buttons:

insertButtonsAfter('ButtonA', 'ButtonB', 'ButtonC', 'ButtonD') - This will insert buttons B, C and D after button A.
insertButtonsBefore('ButtonA', 'ButtonB', 'ButtonC', 'ButtonD') - This will insert buttons 2, 3 and 4 before button A.
addButtonsToLine(1, 'ButtonA', 'ButtonB') - This will add buttons A and B to the end of line 1.
setButtonsForLine( 1, 'ButtonA', 'ButtonB', 'ButtonC') - This will set the entire row of buttons to ButtonsA, B and C.

Removing Buttons

When you want to remove buttons is just as simple as adding them:
HtmlEditorConfig::get('cms')->removeButtons('tablecontrols');

This will remove the table controlls buttons which are grouped together in the tinyMCE code.

removeButtons('ButtonA', 'ButtonB') - this will remove buttons A and B from the editor.

Adding / Removing Plugins

If you can't find what your looking for in the inbuilt TinyMCE controls then you may well be able to find it by using a plugin (or even write your own). To add a particular plugin add this line of code:
HtmlEditorConfig::get('cms')->enablePlugins('blockquote');
This will enable the blockquote plugin, but remember you will need to add the appropriate button separately using one of the methods described above.

You can also disable plugins using, you guessed it, disablePlugins() which as with enablePlugins requires you to remove the button separately.

enablePlugins('PluginA', '../../customPlugins/pluginB') - this will enable the plugins A and B.
disablePlugins('PluginA', '../../customPlugins/pluginB') - this will disable the plugins A and B.

Setting Options

You can also set the TinyMCE options in the same way, so say I wanted to enable the auto_resize option I would add this code:
HtmlEditorConfig::get('cms')->setOption('auto_resize', 'true');

You can also set a group of options at once using the setOptions() call.

setOptions(array('Option1' => 'Value1', 'Option2' => 'Value2')) - sets an array of options.
setOptions('Option', 'Value') - sets an option.

 

Note.

It appears that the settings inside LeftAndMain.php are included after those in _config.php. For this reason if you are trying to change a setting that is set in LeftAndMain.php, you must do it in the getCMSFields() function in your Page.php file.

 

Special thanks to Martijn van Nieuwenhoven for some suggestions regarding this post.

About the Author