Configuring TinyMCE custom styles. Why is importcss_append required

Questions
1

The docs state you must use importcss_append in order for style_formats to work.

That results in duplicate entries in the style drop down:

image
image622×650 56 KB

I don’t want the display-1 under Buttons which is coming from the importcss_append. That’s it’s default behaviour. I just want the list under the Display headings as generated by the style_formats.

I do want the css for selector .display-1{} to be applied in the editor when the setting is used.

This is the config:


$formats = [
    [
        'title' => 'Display headings', 
        'items' => [
            [
                'title' => 'Display 1', 
                'block' => 'h1',
                'classes' => 'display-1'
            ],
            [
                'title' => 'Display 2', 
                'block' => 'h1',
                'classes' => 'display-2'
            ],
            [
                'title' => 'Display 3', 
                'block' => 'h1',
                'classes' => 'display-3'
            ],
        ]
    ],
    [
        'title' => 'Content headings', 
        'items' => [
            ['title' => 'Heading 1', 'block' => 'h1'],
            ['title' => 'Heading 2', 'block' => 'h2'],
            ['title' => 'Heading 3', 'block' => 'h3'],
            ['title' => 'Heading 4', 'block' => 'h4'],
            ['title' => 'Heading 5', 'block' => 'h5'],
            ['title' => 'Heading 6', 'block' => 'h6'],
        ]
    ],
    [
        'title' => 'Buttons', 
        'items' => [
            [
                'title' => 'Button red',
                'inline' => 'span',
                'classes' => 'btn-red',
                'merge_siblings' => true,
            ],
        ]
    ],
];


TinyMCEConfig::get('cms')
    ->addButtonsToLine(2, 'styles')
    ->setOptions([
        'importcss_append' => true,
        'style_formats' => $formats,
        'preview_styles' => false
    ])
    ->setContentCSS(['/css/editor.css]);

TinyMCEConfig::get('cms')->setButtonsForLine(2, 
    'styles', '|',
    'pastetext', '|',
    'table', 'sslink', 'unlink', '|',
    'code'
);

I don’t see importcss_append being a requirement for style_formats to work in the TinyMCE docs.

Appears to be a SS forced requirement?

2

Looking at the simple theme.

Seems you need to prefix your classes in editor.css with .typography for them to be applied in the editor and not shown as an option in formats list.

e.g:

.typography .text-center{
    text-align: center;
}

Makes the text in the editor centre aligned and isn’t in the formats drop down.

Didn’t see any docs on that but it works.