TinyMCE getContent() with default font

Question

I'm using TinyMCE ver 5.4.2. So far everything good. TinyMCE has the configuration option content_style to set default font or other before we set content. It's working on screen but it's not working when we call getContent().

How can we get default font we set it before when we call getContent(). It's only working getContent with font if user change the font from toolbar or menu bar. Is it possible to getContent() with default font or fontsize?

tinymce.init({
    selector: 'textarea#full-featured-non-premium',
    forced_root_block: 'div',
    content_style: "div { font-family: 'comic sans ms', sans-serif; font-size:14px }",
    plugins: ['fullpage save print preview searchreplace autolink directionality',
        'visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor',
        'toc insertdatetime advlist lists wordcount imagetools textpattern noneditable',
        'charmap emoticons quickbars'
    ],
    menubar: 'file format',
    menu: {
        file: {
            title: 'File',
            items: 'newdocument | mnuGetContent'
        },
        format: {
            title: 'Format',
            items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat'
        },
        insert: {
            title: 'Insert',
            items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime'
        },
    },
    setup: function (ed) {
        ed.on('init',
            function () {                    
                tinymce.activeEditor.setContent('<!DOCTYPE HTML"><html><title>this is</title><body><div>Hi World!</div></body></html>', {
                    format: 'html'
                })

            });
        ed.on('BeforeSetContent', function (e) {});
        ed.ui.registry.addMenuItem('mnuGetContent', {
            text: 'Get Content',
            onAction: function () {
                alert(tinymce.activeEditor.getContent({
                    format: 'html'
                }))
            }
        });        
    }
});

Here is the expected result:

content_style: "div { font-family: 'comic sans ms', sans-serif; font-size:14px }"

<!DOCTYPE HTML"><html><title>this is</title><body>
<div style="font-family: 'comic sans ms', sans-serif; font-size:14px">Hi World!</div>
</body></html>

or

content_style: "body { font-family: 'comic sans ms', sans-serif; font-size:14px }"

<!DOCTYPE HTML"><html><title>this is</title><body style="font-family: 'comic sans ms', sans-serif; font-size:14px">
<div>Hi World!</div>
</body></html>

This is the current result:

<!DOCTYPE HTML"><html><title>this is</title><body>
<div>Hi World!</div>
</body></html>

Michael Fromin Michael Fromin · Accepted Answer · 2020-10-23T15:20:43

TinyMCE won't do what you are wanting it to do - but I don't know that what you want is actually a good idea.

While editing content, passing in an external style sheet via content_style or content_css allows you to cleanly separate the semantic content from the styling of that content. When you use the getContent() API call TinyMCE is simply returning to you the content within the <body> of the editor - this is its intended behavior.

If you want to inline the CSS into the HTML before you do something with the content (e.g. send as an email) it would make sense to do that right before you use the content for that purpose. There are tools out there that can do this inlining as this is a common need for sending emails.

If you opt to change the CSS in the future and you inline the CSS when the content is saved you would have to "fix" all the prior content each time you update your CSS. If you inline the CSS when you choose to use/send the content you maintain the separation of the content from its layout and make it easier to both update the content and change its layout in the future.

TinyMCE getContent() with default font

1 Answers