TinyMCE enable custom plugins

Silverstripe Version: 4.6

How do we go about adding custom plugins to the editor. The docs aren’t helpful and the link used to TinyMCE doesn’t work.

From a previous question around existing plugins I have in _config.php:

HtmlEditorConfig::get('cms')->enablePlugins(['redactor' => '/javascript/redactor.js']);
HtmlEditorConfig::get('cms')->insertButtonsAfter('redactor', 'anchor');

The redactor.js file is getting pulled in. No button shows up though.

In TinyMCEConfig::modifyButtons() I see the button doesn’t get added (returns false).

redactor.js is just a copy of the default example from TinyMCE 4 docs with the name changed.


tinymce.PluginManager.add('redactor', function(editor, url) {
    // Add a button that opens a window
    editor.addButton('redactor', {
      text: 'Redactor',
      icon: 'hr', // Have tried false here too
      onclick: function() {
        // Open window
        editor.windowManager.open({
          title: 'Redactor plugin',
          body: [
            {type: 'textbox', name: 'title', label: 'Title'}
          ],
          onsubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent('Title: ' + e.data.title);
          }
        });
      }
    });
  
    // Adds a menu item to the tools menu
    editor.addMenuItem('redactor', {
      text: 'Redactor plugin',
      context: 'tools',
      onclick: function() {
        // Open window with a specific url
        editor.windowManager.open({
          title: 'TinyMCE site',
          url: 'https://www.tinymce.com',
          width: 800,
          height: 600,
          buttons: [{
            text: 'Close',
            onclick: 'close'
          }]
        });
      }
    });
  
    return {
      getMetadata: function () {
        return  {
          name: "Redactor plugin",
          url: "http://exampleplugindocsurl.com"
        };
      }
    };
  });
1 Like

This does work. I think all it was, was the insertButtonsAfter parameters were the wrong order.

Probably you can do it in the Silverstripe Way? For example to remove the table button:

\SilverStripe\Forms\HTMLEditor\TinyMCEConfig::get('cms')->removeButtons('table');

to add a button:
TinyMCEConfig::get('cms') ->addButtonsToLine(1, 'styleselect');