Home
 

24

Jul

34

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:

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:

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.

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:

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

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

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

Comments (10)

  • This is what am looking for. Really nice....

    Posted by freelance php developer, 06/07/2010 1:37am (23 days ago)

  • We use jsp in our project and my tinyMCE version is 2.1.1.1, how can remove a custom button from the tinyMCE panel? Thanks!

    Posted by Henry Zhang, 05/03/2010 4:40am (5 months ago)

  • I found out how to alter the format dropdown in 2.3.4

    Using the LeftAndMainDecorator.php extension technique mentioned in
    http://open.silverstripe.org/ticket/4390

    I added the following line under //initialize...

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

    You can stick as many as you want there.

    Note that the styles pulldown is simply a matter of creating an editor.css and create styles in typography.css that dont start with .typography. They just appear after a flush


    Posted by Julian, 16/01/2010 5:27pm (6 months ago)

  • Hi Steve

    That sounds very strange, I can't say I have had that problem, but then I also can't say I have tried it in IE. I will have a play when I get a moment and let you know if I also have that issue.

    Posted by Aram, 29/12/2009 7:06am (7 months ago)

  • Hi Aram,
    I have added the code to include the color option and the font size and type. This seems to work fine, but I am having to click on the Site Content button (top left) to refresh the page for these tools to show up.

    My clients are having the same problem. Also they don't seem to work in IE. Not a big deal - everyone should work in FF anyway. Any ideas?

    Thank you,
    Steve

    Posted by Steve Nyhof, 28/12/2009 11:44pm (7 months ago)

  • HtmlEditorConfig::get('cms')->insertButtonsAfter('formatselect', 'fontselect', 'fontsizeselect', 'forecolor');

    This is what you meant. How do I add this to the second button line?

    Thank you,
    Steve

    Posted by Steve Nyhof, 25/12/2009 11:46pm (7 months ago)

  • I got the font color to work, but where do I find the list of buttons? Like for \\\'fontselect\\\' and \\\'fontselect_text\\\' ?

    I figured it out - fontselect and fontsizeselect.

    HtmlEditorConfig::get(\'cms\')->insertButtonsAfter(\'formatselect\', \'forecolor\');
    HtmlEditorConfig::get(\'cms\')->insertButtonsAfter(\'formatselect\', \'fontselect\');
    HtmlEditorConfig::get(\'cms\')->insertButtonsAfter(\'formatselect\', \'fontsizeselect\');

    Posted by Steve Nyhof, 25/12/2009 11:39pm (7 months ago)

  • Can you be a bit more specific about cases where you would need to add this code to the getCMSFields() function in Page.php? In a fresh SS install that function does not exist in Page.php by default. Also, for me, adding it to only Page.php did not work. Adding it in the _config did (so far--still a very fresh install.)

    Posted by Luke, 02/12/2009 4:15pm (8 months ago)

  • I'm using the Simplify Module now. It works great for simplifying the CMS for security groups, including editing the WYSIWYG editor. http://silverstripe.org/all-other-modules/show/264972?start=0

    Posted by Andrew Houle, 19/11/2009 5:03pm (8 months ago)

  • Update: Moved the code to the recommended area of LeftandMain.php to add button to line 2 and enable plugin but still doesn't work...thanks!

    Posted by Kristina, 19/11/2009 2:39pm (8 months ago)

1 2 3 4 next »

RSS feed for comments on this page RSS feed for all comments

Post your comment