Adding a custom button to TinyMCE


I had to add a button to TinyMCE editor, which would insert placeholder codes, which would be replaced before rendering the site.

There were two problems here.

  1. Replacing placeholders in content with data relevant to the object. This is like using TextParsers (think BBCodes), but I needed access to the relevant DataObject, which wasn't possible without hacking at core. I couldn't do this all through templates either, because my client needed to be able to customise things.
  2. Actually getting the button into TinyMCE and having it do something.

Steps taken

Write a custom Content method on my DataObject class which parses my placeholders

public function Content() {
    return pregreplace'/%([^%]+)%/', 'testoutput', $this->Content);

Write a TinyMCE plugin (based on the example plugin provided), which adds a button with a drop-down menu to the SilverStripe HTML editor.

See the code here

This code should go into:

YOUR SITE/sapphire/thirdparty/tinymce/plugins/YOURPLUGIN/

Add buttons to the TinyMCE toolbar

This typically goes into your _config.php

HtmlEditorConfig::get('cms')->enablePlugins('myplugin');<br/>HtmlEditorConfig::get('cms')->insertButtonsBefore('bold', 'mybutton');

That should do it.