How to set default font and size options?

[joegiannini]

As the title suggests. I don't see a way to override the default font style and size when using the Blazor server version of TinyMCE.

[exalate-issue-sync[bot]]

Ref: INT-2967

[jscasca]

Hello @joegiannini

Have you tried setting content_style for TinyMCE. To set TinyMCE properties you can either set the Blazor component's Conf property or setting JsConfSrc

[joegiannini]

I've been using the Conf property of the Editor tag. It seems to work for setting the basic toolbar properties and size details jut fine. I am trying to have a specific font and font size selected by default. Essentially, I want to have the effect of running the setup function (ed) within init where I set the fontName and fontSize defaults. The below works w/ JS but I'm hoping to find a way to set the defaults using the blazor version.

tinymce.init({ selector: '#menu', toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', width: 700, height: 432, font_formats: 'Century Gothic=century gothic,sans-serif; Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats', fontsize_formats: '8pt 10pt 11pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt', setup: function (ed) { ed.on('init', function () { this.execCommand("fontName", false, "Century Gothic"); this.execCommand("fontSize", false, "11pt"); });

[masterparser]

I am using TinyMCE 6 with Blazor Server (.NET 6). I used JsConfSrc, as suggested by @jscasca, to set the fontName and fontSize defaults:

ComponentThatContainsTinyMCEEditor.razor: <Editor JsConfSrc="tinymcesettings" />

_Layout.cshtml:

<script src="_framework/blazor.server.js"></script>
<script>
        window.tinymcesettings = {
            content_style: 'body { font-family:Tacoma,sans-serif; font-size:18px }',
            height: 300,
            + any other settings...
}
</script>

[joegiannini]

Thank you both very much! Using content_style does the trick. I had misread the original suggestion from @jscasca.