SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Tutorials - Big bits of code to help you do more

Customising the WYSYWIG editor (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.

Another popular request is to edit the format dropdown, which you can do by adding this to your _config.php file:

HtmlEditorConfig::get('cms')->setOption('theme_advanced_blockformats', 'p,div,h3,h4,h5,h6,blockquote,code'); 

Adding Styles

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.

Aram Balakjian avatar

Aram Balakjian

Aram is a web developer running London based agency Aab Web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

  • Dave2011
    06/10/2010 9:39pm (4 years ago)

    Could someone show how to install SyntaxHL into TinyMCE. There is only ONE post at Silverstripe Forum but I have no success in following it. Thanks

  • Aram Balakjian
    09/10/2010 11:41pm (4 years ago)

    @testSVstripe - I am using this plugin for SSbits : http://27smiles.com/2008/04/07/tinymce-syntaxhighlighter-plugin/
    Very easy to install as per the code on this page

  • pingu
    17/01/2011 4:22am (4 years ago)

    Can an example of how to add a setup event also be provided? I need to display a character count, and would like to use this code snippet:
    http://tinymce.moxiecode.com/forum/viewtopic.php?pid=42558#p42558

    However, I'm not sure how to add a setup event to TinyMCE. The method proposed in the one post regarding this on the forums doesn't appear to work for me:

    http://silverstripe.org/customising-the-cms/show/14071

  • Jellygnite, Brisbane Web Design
    15/07/2011 3:21am (3 years ago)

    I can add new styles by adding them to the cms/css/editor.css file.

    This all works but I prefer to use the style_formats option in TinyMCE. e.g. http://tinymce.moxiecode.com/tryit/custom_formats.php

    I can get the block of code for style_formats inserted but it is not affecting the styles dropdown. I would much prefer to use this way as you have greater control over which elements can have which styles.

    HtmlEditorConfig::get('cms')->setOption('style_formats', "[{title : 'Paragraph left', selector : 'p', classes : 'left'},{title : 'Paragraph right', selector : 'p', classes : 'right'}]");

    Has anyone had success with this method?

  • Drew Davidson
    28/10/2011 11:46am (3 years ago)

    Aram

    I am having problems with image position in the TinyMCE when formatted to right they sit ok until saved then show up on left. in the preview they are on right. What am I doing wrong.

    Drew

  • Silverfish
    11/01/2012 11:40am (3 years ago)

    HtmlEditorConfig::get('cms')->removeButtons('tablecontrols');

    Doesn't seem to work in Silverstripe 2.4.6

    Any Idea Anyone? :)

    Regrads
    SF.

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image Martijn van Nieuwenhoven
7 article image Darren-Lee
8 article image Roman Schmid
9 article image Matt Clegg
10 article image dalesaurus

View full leaderboard


Advertisement