content_css in tinymce - Imported style in the class list

Question

I added my css file to tinymce with "content_css". After importing the classes from the file, they appear in the list https://prnt.sc/vpldk0 . How to make all these listed classes look the same. Currently, the appearance of the names is taken from the imported css file.

Here is already generated js code for TinyMce.

tinymce.init({
selector: 'textarea.mceEditor',
min_height: 500,
max_height: 500,
language: 'pl',
resize: false,
element_format: 'html',
branding: true,//Podpis wyswiga
plugins: [
'importcss',
'advlist autoresize autolink lists link image imagetools charmap preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars responsivefilemanager code autosave',
'insertdatetime media nonbreaking table directionality',
'template textcolor colorpicker textpattern',
'directionality help hr paste fullscreen fullpage'
],
toolbar: [
'bold italic underline strikethrough | forecolor backcolor | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | removeformat subscript superscript',
'template restoredraft| code preview | cut copy paste searchreplace spellchecker toc',
'ltr rtl',
'undo redo | hr media link responsivefilemanager image nonbreaking pagebreak fullscreen fullpage |styleselect  fontselect fontsizeselect '
],

spellchecker_language: 'pl', // Język sprawdzenia pisowni
image_caption: true, //Dodaje możliwość podpisania obrazu. Używa do tego znaczników html5
image_advtab: true, // dodanie karty z zaawansowanymi opcjami do okna dodawania obrazka
image_title: true, // Dodanie opcji tytułu do obrazka do okna dodawania obrazka
default_link_target: "_blank", //Domyślny cel dla wstawianych linków
nonbreaking_force_tab: true, //Ta opcja pozwala zmusić TinyMCE do wstawienia trzech  elementów, gdy użytkownik naciśnie tab.
pagebreak_separator: "<!-- pagebreak -->", //Definiowanie, jak ma wyglądać pagebreak'er
pagebreak_split_block: true, //ułatwia dzielenie elementów bloku z podziałem strony. Gdy wyłączymy, to będzie akceptował wstawianie separatora bez zamknięcia znacznika np: <p><span>podgląd statusu realizacji zamówień</span>< pagebreak --><span><span>podgląd historii zakupów</span></span></p>
importcss_append: true,//Pozwala na to, by zdefiniowane style nie kolidowały z zaimportowanymi css
// style_formats_merge: true, //Mergowanie style formats z innymi stylami
//toolbar_drawer: 'floating', // Ukrywanie nadmiaru p[luginów - otwieranie po nacisnieciu kropek
paste_data_images: false, //Czy można wklejać obrazki ( ctrl + v ) - dla bezpieczeństwa lepiej zostawić na false czyli uniemożliwić.
paste_enable_default_filters: false,//Możliwość wyłaczenia / nadpisania domyślnych filtrów - musi byc na false by validować tekst w worda
paste_word_valid_elements: "b,strong,i,em,h1,h2,h3,h4,h5,h6", //Domyślnie usuwane znaczniki wklejane z z MS Office
paste_merge_formats: false, //Scalanie ( podczas wklejania ) występujących obok siebie takich samych znaczników np <b>Lorem></b> <b>aaa</b> zamienia na <b>lorem aaa</b>

paste_as_text: true, //Czyszczenie tekstu wklejonego np z worda

fullscreen_native: true,

//Opcje od FileManager
external_filemanager_path: "/admin/wysiwyg/new_tinymce/filemanager/",
filemanager_title: "Manager plików",
external_plugins: {
// "button": "/admin/wysiwyg/buttons/button.js", //Nazwy pliku js i nazwy przyciski ( toolbar + funckje) muszą być te same!
"filemanager": "/admin/wysiwyg/new_tinymce/js/tinymce/plugins/responsivefilemanager/plugin.min.js",
},
filemanager_access_key: 'Ujd5dDI1VEFPVFV4cXJaaFd4RzlNZTdSdldUL0tFbHRHQXhjNmVuR0tZZm92OTZDaTZ5NWJCYVVxaXdKOTVZTjh5bGVvSHgrU0ozdUxNems4QVVuMjVteFpNQWVNOGxTU0ZnQlI1NHAwYVJLQW5JRGpHUDdYanhBa0lJQTl0ZkRQTUhFcGxJalFNelA3NUtEczk2TFpFVmZsaVE5V0ZrZTM0RzduU20zeEIycjIvczFvRXBidU9yWUpKUzZXb1VrWE5Ra3JEaDFUanowMENWZU56RXZoWTU0ck52WkUzQWFrc3R6aGcrZGQ1MD0=',


////////////////////////////////////////////
//Sprawdzanie pisowni ale przez przeglądarke.

browser_spellcheck: true,
contextmenu: false, /// Wyłacza menu kontekstowe wysiwyga
gecko_spellcheck: false,
// spellchecker_rpc_url: 'spellchecker.php',

////////////////////////////////////////////
//Zwracanie video w postaci <video> zamiast <iframe> -  niestety działa dopiero jak zacznie się ręcznie link wpisywać ;/
        video_template_callback: function(data) {
        return '<video muted width="' + data.width + '" height="' + data.height + '"' + (data.poster ? ' poster="' + data.poster + '"' : '') + ' controls="controls">\n' + '<source src="' + data.source1 + '"' + (data.source1mime ? ' type="' + data.source1mime + '"' : '') + ' />\n' + (data.source2 ? '<source src="' + data.source2 + '"' + (data.source2mime ? ' type="' + data.source2mime + '"' : '') + ' />\n' : '') + '</video>';
},
// media_url_resolver: function (data, resolve/*, reject*/) {
//     if (data.url.indexOf('YOUR_SPECIAL_VIDEO_URL') !== -1) {
//         var embedHtml = '<iframe src="' + data.url +
        //             '" width="400" height="400" ></iframe>';
//         resolve({html: embedHtml});
//     } else {
//         resolve({html: ''});
//     }
// },
media_live_embeds: true,
media_poster: true,

////////////////////////////////////////////
//Szablony definiowane obiektem
templates: [{title: 'Szablon newslettera', description: 'Szablon', url: 'http://project3.vlocal/wysiwyg_template/newsletter.html' }],
content_css: ['../template/rwd/dev/css/component/tinymce.css?ts=1606294159'],
style_formats: [{title: 'header', items: [{title: 'Header 1', format: 'h1'}, {title: 'Header 2', format: 'h2'}, {title: 'Header 3', format: 'h3'}, {title: 'Header 4', format: 'h4'}, {title: 'Header 5', format: 'h5'}, {title: 'Header 6', format: 'h6'}]}],
formats: {bold: {inline: 'strong'} , italic: {inline: 'i'} , underline: {inline: 'u'} , strikethrough: {inline: 'del'} },
fontsize_formats: '8px=0.5rem 10px=0.6rem 11px=0.786rem 12px=0.8rem 13px=0.214rem 14px=0.9rem 15px=0.9rem 16px=1rem 17px=1.214rem 18px=1.1rem 19px=1.357rem 20px=1.3rem 21px=1.5rem 22px=1.571rem 23px=1.643rem 24px=1.5rem 25px=1.6rem 26px=1.857rem 27px=1.929rem 28px=1.8rem 29px=2.071rem 30px=2.143rem 32px=2rem 36px=2rem 40px=3rem 44px=3rem 48px=3rem 50px=3rem',

codesample_languages: [],

});

Answer 1

The preview_styles configuration setting will allow you to control this behavior:

https://www.tiny.cloud/docs/configure/editor-appearance/#preview_styles

For example:

tinymce.init({
  selector: '#mytextarea',
  ...
  preview_styles: false
});