TinyMCEConfig / HtmlEditorConfig > style_formats (Silverstripe 4)

_config_TinyMCEConfig.php

<?php


// place this in /app/config.php


use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;



/**
 * ******************************************************************
 *
 * Customize TinyMCE
 *
 * see:
 * https://docs.silverstripe.org/en/4/developer_guides/forms/field_types/htmleditorfield/
 * https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/typography/
 * https://github.com/purplespider/silverstripe-mypswd-tweaks/blob/master/_config.php
 * https://www.tiny.cloud/docs-4x/configure/content-formatting/#style_formats
 * https://www.tiny.cloud/docs-4x/plugins/importcss/#importcss_selector_filter
 *
 * Info:
 * - Style Selector Dropdown ("formatselect") aktivieren
 * - Styles aus editor.css werden dann normalerweise automatisch ins Dropdown importiert
 * - Wir verhindern diese Auto-Population des Dropdowns
 * - Aber ermöglichen trotzdem, eigene Styles hinzufügen
 *
 * ******************************************************************
 */


// style_formats example
$style_formats = [
        [
        'title' => 'Button',
        'selector' => 'a, button, input, span, p',  // don't forget p-tag, or automatic span-generation won't work
        'inline' => 'span',
        'classes' => 'btn'
    ],
    [
        'title' => 'Button small',
        'selector' => 'a, button, input, span, p', // don't forget p-tag, or automatic span-generation won't work
        'inline' => 'span',
        'classes' => 'btn btn-sm'
    ],
    [
        'title'   => 'Green Text',
        'inline' => 'span',
        'classes' => 'green'
    ],
    [
        'title' => 'Button red',
        'inline' => 'a',
        'classes' => 'btn-red',
    ],
    [
        'title' => 'Red Text',
        'inline' => 'span',
        'selector' => 'span,p,h1,h2,h3,h4,h5,h6,td,th,div,li',   // don't forget p-tag, or automatic span-generation won't work
        'classes' => 'text-red',
    ]
];


$editor = TinyMCEConfig::get('cms');

$editor->setOptions();
$editor->setOptions(['entity_encoding' =>'raw']);                         // Raw output für tinyMCE: ä als ä in DB sichern, nicht als &auml;, das sich mit sitesearch nicht verträgt
$editor->removeButtons('underline','alignjustify');                       // Buttons entfernen
$editor->enablePlugins('hr');                                             // hr-Plugin aktivieren
$editor->insertButtonsAfter('indent','hr');                               // hr-Button einfügen
$editor->insertButtonsAfter('formatselect','styleselect');                // Style Selector Dropdown einfügen
//$editor->addButtonsToLine(1, 'styleselect');                            // Style Selector Dropdown einfügen, alternative Methode

// Style Formats Konfiguration – stops format styles being automatically imported from CSS, but enables ability to add custom styles using 'style_formats'
$editor->get('cms')
    ->setOptions([
        'importcss_append'          => true,             // benötigt, damit style_formats überhaupt angewendet wird
        'importcss_selector_filter' => 'abc123',         // Fake Filter: Styles aus editor.css NICHT in Dropdown anzeigen
        'style_formats'             => $style_formats,   // Dropdown style_formats anzeigen
        'style_formats_merge'       => false,            // true: zu Standardformaten hinzufügen / false: Standardfpormate ersetzen
        'allow_script_urls'         => true              // erlaube javascript in href-tags (z.B. für Analatics Optout
    ]);