Tutorials - Big bits of code to help you do more
Customising the WYSYWIG editor (TinyMCE)Tweet
24 July 2009 | | | Supports v2.4, v2.3
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.
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.
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:
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.
When you want to remove buttons is just as simple as adding them:
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:
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.
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:
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.
Another popular request is to edit the format dropdown, which you can do by adding this to your _config.php file:
Often you will want to give you clients a some control over adding pre-defined styles. This is really easy using the TinyMCE styles dropdown. To get styles to show up here, simply add them to your typography.css file without the preceding .typography class. You will then need to ensure you have an editor.css file in your themes css folder which is @importing the typography file.
Special thanks to Martijn van Nieuwenhoven for some suggestions regarding this post.