Tinymce - what do I need to change for - getcontent - to inlcude all css styling?

I'm having difficulty understanding what I need to do, in order for getcontent to produce html that is identical to the content displayed in the tinymce window/frame/area.

I have tried with inline and iframe, but they both return identical results.

I've started using a skin, to try and ensure the formatting/styling are applied at load, but it makes no difference.

Can anyone tell me what I need to do, so that when I view (in a web browser) the html produced by getcontent, the result is visually identical to what I'm seeing in my tinymce viewer? Notably, font settings are not being retained. (e.g. by creating a file from getcontent result and opening it in a browser).

NB.. Tinymce is being loaded from a Filemaker database (file = Notes::Notes_RTE_html)

<!DOCTYPE html>
<html lang=’en’>
<head>
<meta charset=’utf-8’>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://website/TINY/tinymce/js/tinymce/tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#GSNotes',
skin_url: 'https://website/TINY/GSNotes-skin/skins/ui/GSNotes-skin/',
content_css : 'https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css',
inline: true,
inline_styles : true,
menubar: false,
statusbar: false,
contextmenu: false,
toolbar_location: 'bottom',
paste_data_images: true,
inline_boundaries: false,
link_context_toolbar: true,
toc_depth: 4,
toc_header: 'h3',
autosave_interval: '5s',
fontsize_formats: '0.5rem 0.75rem 0.85rem 0.9rem 1rem 1.1rem 1.2rem 1.4rem 1.7rem', 
insertdatetime_formats: ['✏️ (%d/%m/%Y  -  %Hh%M)'],

plugins: 'table image imagetools quickbars searchreplace lists link autolink autosave paste media hr codesample insertdatetime toc blockquote ',

quickbars_insert_toolbar: '',
quickbars_selection_toolbar: ' bold italic underline strikethrough | blockquote | forecolor backcolor |  link  |  removeformat',

toolbar: 'searchreplace insertdatetime  | bullist numlist | hr |  paragraphgroup fontgroup insertgroup | tocupdate | print preview restoredraft ',
toolbar_groups: {
    fontgroup: {
    icon: 'change-case',
            tooltip: 'Fonts',
            items: ' fontsizeselect '
    },
        paragraphgroup: {
            icon: 'visualchars',
            tooltip: 'Paragraph format',
            items: 'h1 h2 h3 h4 | toc | alignleft aligncenter alignright alignjustify | indent outdent'
        },
        insertgroup: {
            icon: 'image',
            tooltip: 'Insert',
            items: 'image media table paste codesample'
        }
    },

codesample_languages: [
        {text: 'HTML/XML', value: 'markup'},
        {text: 'JavaScript', value: 'javascript'},
        {text: 'CSS', value: 'css'}
    ],

});

</script>
</head>
<body>

<div id= 'GSNotes' style='min-height: 550px; height: 98% ; font-family: Avenir Next ; font-size: 0.9rem ; line-height: 1.2rem ; color : #1D273D ; ' > " & Notes::Notes_RTE_html & " </div>     

<script>

const saveTEXT = function() {
        const textPlain = tinymce.get('GSNotes').getContent({ format: 'text' });
        const textHTML = tinyMCE.get('GSNotes').getContent();
        const jsonARR = { textPlain, textHTML};
        FileMaker.PerformScriptWithOption ( 'RTE-exit' , JSON.stringify(jsonARR) , '5' ); }
</script>
</body>
</html>

Solution

TinyMCE does not contain the attached CSS in the result of the getContent() query. The editor works a bit differently.

By default, it outputs "clean" HTML, assuming that you have some CSS on the platform that defines its' appearance. To bring content in the editor to the same appearance as it should be on the platform, the content_css parameter is used.

Thus, if you need the content to have some styling after it is exported from TinyMCE, you will need to add the same CSS on your side, after it is exported. E.g., add

<link rel="stylesheet" href="https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css">