TinyMCE custom config doesnt trigger if not in Main tab unless the skin is explicitly set

[ButerRick]

So I made different tinyMCE configurations so that I would be able to set different styled of HTMLEditorFields in my project.
It all worked very well with 1 configuration, but when I added more I noticed the issue.

So the official issue is this:

• I made some different HTMLEditor configs in _config.php.
• I use these in Elemental blocks and tabs just on a page.
• The weird thing is that the HTMLEditor doesnt show on any block or in any tab. But as soon as I put one in the Root.Main of a page, all of a sudden they all work. Looks like it only loads all the stuff it need on the Main of a page.
• Looks like when I havent visited a page tinyMCE is not able to find skin.min.css and content.min.css
  After visiting a page where this htmlEditor with the config exists it does load.

This is my _config.php

<?php

use SilverStripe\Security\PasswordValidator;
use SilverStripe\Security\Member;
use SilverStripe\Core\Manifest\ModuleLoader;
use SilverStripe\Forms\HTMLEditor\HTMLEditorConfig;

// remove PasswordValidator for SilverStripe 5.0
$validator = PasswordValidator::create();
// Settings are registered via Injector configuration - see passwords.yml in framework
Member::set_password_validator($validator);

// Default editor config
// ---------------------
$cmsConfig = HTMLEditorConfig::get('cms');

// plugins
$cmsConfig->disablePlugins('table');
$cmsConfig->enablePlugins(['hr']);

// buttons
$cmsConfig->setButtonsForLine(1, [
    'bold', 'italic', 'underline', 'strikethrough', '|',
    'subscript', 'superscript', '|',
    'removeformat', '|',
    'alignleft', 'aligncenter', 'alignright', '|',
    'bullist', 'numlist', 'outdent', 'indent',
]);
$cmsConfig->setButtonsForLine(2, [
    'formatselect', 'styleselect', '|',
    'paste', 'pastetext', '|',
    'table', 'sslink', 'unlink', '|',
    'code'
]);
$cmsConfig->setButtonsForLine(3, []);

$cmsStyleFormats = [
    [
        'title' => 'Headings',
        'items' => [
            [
                'title' => 'Large (h1 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h1'], // Use attributes instead of classes to overwrite all classes
            ],
            [
                'title' => 'Medium (h2 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h2'],
            ],
            [
                'title' => 'Small (h3 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h3'],
            ],
        ]
    ],
    [
        'title' => 'Lists',
        'items' => [
            [
                'title' => 'USP List',
                'selector' => 'ul,ol',
                'attributes' => ['class' => 'usp-list'], // Use attributes instead of classes to overwrite all classes
            ],
        ]
    ],
];

$cmsConfig->setOptions([
    'style_formats' => $cmsStyleFormats,
    'importcss_append' => true,
    'preview_styles' => false,
    'importcss_selector_filter' => '.editor-',
]);

// Header editor config
// --------------------

$headerConfig = HTMLEditorConfig::get('header-config');
$headerConfig->setButtonsForLine(1, ['formatselect', 'styleselect', '|', 'underline']);
$headerConfig->setButtonsForLine(2, []);
$headerConfig->setButtonsForLine(3, []);

$headerStyleFormats = [
    [
        'title' => 'Headings',
        'items' => [
            [
                'title' => 'Large (h1 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h1'], // Use attributes instead of classes to overwrite all classes
            ],
            [
                'title' => 'Medium (h2 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h2'],
            ],
            [
                'title' => 'Small (h3 styling)',
                'selector' => 'h1,h2,h3',
                'attributes' => ['class' => 'js-reveal-text h3'],
            ],
        ]
    ],
];

$headerConfig->setOptions([
    'block_formats' => 'Header 1=h1;Header 2=h2;Header 3=h3',
    'style_formats' => $headerStyleFormats,
    'importcss_append' => true,
    'preview_styles' => false,
    'importcss_selector_filter' => '.editor-',
    'formats' => [
        'h1' => ['attributes' => ['class' => 'js-reveal-text h1'], 'block' => 'h1',],
        'h2' => ['attributes' => ['class' => 'js-reveal-text h2'], 'block' => 'h2',],
        'h3' => ['attributes' => ['class' => 'js-reveal-text h3'], 'block' => 'h3',],
        'underline' => [
            [
                'inline' => 'span',
                'classes' => 'text--underline',
            ]
        ]
    ],
]);

// Intro editor config
// --------------------

// ! https://github.com/silverstripe/silverstripe-admin/issues/193

$module = ModuleLoader::inst()->getManifest()->getModule('silverstripe/admin');

$introConfig = HTMLEditorConfig::get('intro-config');
$introConfig->enablePlugins([
    'sslink' => $module->getResource('client/dist/js/TinyMCE_sslink.js'),
    'sslinkexternal' => $module->getResource('client/dist/js/TinyMCE_sslink-external.js'),
    'sslinkemail' => $module->getResource('client/dist/js/TinyMCE_sslink-email.js'),
]);
$introConfig->setButtonsForLine(1, ['sslink']);
$introConfig->setButtonsForLine(2, []);
$introConfig->setButtonsForLine(3, []);

$introConfig->setOptions([
    'block_formats' => 'Paragraph=p;',
    'body_class' => 'typography typography--intro',
    'preview_styles' => false,
    'importcss_selector_filter' => '.editor-',
]);

Now when I use one of these configs, I put it in the htmlEditorField like this:

$fields->addFieldsToTab('Root.Hero', [ HTMLEditorField::create('PageTitle') ->setTitle('Titel') ->setRows(15) ->setEditorConfig('header-config'), ...

So this one doesnt sit on Root.Main, so it doesnt load the config.

And I see that certain styles are not beeing found:

When I visit a page where the config is loaded on root.Main, everything loads and I can see it everywhere.
I made a gif for example:

I hope this is enough information. Otherwise I will provide more.

Acceptance criteria

• Validate if this affects CMS4 or CMS5 or both
• TinyMCE config is loaded on all tabs when access pages.

PR

• FIX TinyMCE custom config issue #1507

[ButerRick]

Update:
I just made a contactpage with the HTMLEditorField with the config enabled in the Main tab.
This made no difference. As in, I still dont see the HTMLTextEditors there.
I only see it when I enter a specific page type.

...to be continued

[GuySartorelli]

Can you please paste the code as text in code blocks instead of images? It will make reproducing this a lot easier if we can just copy the code into a test project.

[ButerRick]

@GuySartorelli . Ofcourse. My issue is updated.
Thanks in advance

[GuySartorelli]

Thanks.

Sounds like it might be related to (or potentially the same as) silverstripe/silverstripe-framework#10673

[sirtoobii]

@ButerRick The trick is to explicitly set the editor skin to silverstripe

[ButerRick]

@sirtoobii can you please explain what you mean with editor skin? And where do I set this?
Thank you so much in advance

[sirtoobii]

Hey @ButerRick
For example one of our "simple" editor configs:

HtmlEditorConfig::get('pd_simple')
    ->setOptions([
        'skin' => 'silverstripe',
        'valid_elements' => "p,pre,a[href],strong,em,sup,sub",
        'max_width' => 500,
        'verify_html' => true,
        'forced_root_blocks' => false,
        'remove_linebreaks' => true,
        'schema' => 'html5',
        'paste_as_text' => true,
    ])
    ->disablePlugins('advimagescale', 'table', 'paste')
    ->enablePlugins('link', 'code')
    ->setButtonsForLine(1, [
        'italic', 'bold', 'link', 'unlink', 'superscript', 'subscript', 'code'
    ])
    ->setButtonsForLine(2, []);

[ButerRick]

@sirtoobii Adding 'skin' => 'silverstripe', to options worked like a charm.
I dont know how or why, but my issue is resolved.

I'm letting @GuySartorelli determine if this can be closed or not

[michalkleiner]

Adding the skin is one thing, we need to determine whether adding/adjusting any config option has the same effect, i.e. whether it's about invoking and setting the config in general or whether the skin is the culprit.

[GuySartorelli]

I've changed the name of the issue slightly to reflect the new information - but this is definitely still a bug. If it is just not adding the skin that causes this, it should fall back to the tinymce default skin, I'd have thought.

[sabina-talipova]

This issue has been tested on CMS 5 and CMS 4. CMS 5 doesn't have this issue. Issue was fixed in CMS 4.

[GuySartorelli]

PR merged and tagged as 1.13.1