Set default text / values for fontsize and fontfamily in tinymce.init()

user_6133426 0
Viewed 775

I'm using Bootstrap 3, and intializing tinyMCE (5.1.0) within a local modal (it's inside the page which is calling it, not being loaded externally) like this:

        tinymce.init({ 
            mode: "specific_textareas", 
            plugins : 'advlist autolink link image lists charmap print preview textcolor',
            toolbar: "undo redo fontselect fontsizeselect bold italic underline forecolor backcolor alignleft aligncenter alignright alignjustify",
            editor_selector: "txtContent",
            height: 400
        });

and it works. However, the dropdowns for fontsize and font family dropdowns have no initial value, like shown on the following image. empty select

Is there a way for me to set (or preselect) the default text (or value) of both dropdowns? If so, how should do it? I've Googled about, and have found nothing regarding this.

I've noticed that when I focus out, the selects are filled with System font, and 12pt, respectively, so I guess I could focus in and out of them in order to achieve what I want, but there has to be a better way of doing it.

EDIT I've also used this:

        tinymce.init({ 
            mode: "specific_textareas", 
            plugins : 'advlist autolink link image lists charmap print preview textcolor',
            toolbar: "undo redo fontselect fontsizeselect bold italic underline forecolor backcolor alignleft aligncenter alignright alignjustify",
            editor_selector: "txtContent",
            height: 400,
            setup: function(ed) {
                ed.on('init',function(){
                    ed.execCommand("fontName",false,"Arial");
                    ed.execCommand("fontSize",false,"12");
                });
            }
        });

While this actually works, something resets the dropdowns back to their original (empty) values, and if I press CTRL + Z, I can see the code had worked (the values were actually selected).

EDIT: The issue is within Bootstrap and the way it handles modals.

tinymce
1 Answers

One option is to use content_styles: to apply a default font to the body of the embedded iframe. This font information is then reflected in the dropdowns on page load. Here is a Tiny Fiddle demonstration: http://fiddle.tinymce.com/nTgaab

You can also use content_css in a similar fashion by linking to a remote CSS file with similar font information.

Here's some more information:

https://www.tiny.cloud/docs/configure/content-appearance/#content_style https://www.tiny.cloud/docs/configure/content-appearance/#content_css

user_110522510
Related