Customizing TinyMCE in SilverStripe 4.x

Custom-TinyMCE.md

Customizing TinyMCE in SilverStripe 4.x

Other resources

SilverStripe thread

SilverStripe Docs

TinyMCE color picker

Adding editor.css styles to dropdown

Add this to your app/_config.php

use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

TinyMCEConfig::get('cms')
    ->addButtonsToLine(1, 'styleselect')
    ->setOption('importcss', true);
Then add your styles to editor.css

And make sure to include editor.css to your page.ss template as well.

Adding a color picker

Add this to app/_config.php

use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

$formats = [ //define your custom background/foreground colors here
    '000000', 'Black',
    '993300', 'Burnt orange',
    '333300', 'Dark olive',
    '003300', 'Dark green',
    '003366', 'Dark azure',
    '000080', 'Navy Blue'
];

TinyMCEConfig::get('cms')->enablePlugins('textcolor');
TinyMCEConfig::get('cms')->insertButtonsBefore('formatselect', 'forecolor backcolor');
TinyMCEConfig::get('cms')->setOptions([
    'textcolor_map' => $formats
]);

Customizing block formats

Add your custom styles to your .css and add this to your app/_config.php

use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;

$formats = [
    [
        'title'             => 'Style 1',
        'selector'          => 'div',
        'classes'           => 'style1',
        'wrapper'           => true,
        'merge_siblings'    => false,
    ],
    [
        'title'             => 'Button red',
        'inline'            => 'span',
        'classes'           => 'btn-red',
        'merge_siblings'    => true,
    ],
];


TinyMCEConfig::get('cms')
    ->addButtonsToLine(1, 'styleselect')
    ->setOptions([
        'block_formats'     => "Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Div=div",
        'importcss_append'  => true,
        'style_formats'     => $formats
]);