How to change default font size in tinymce?

I am using jquery tinymce editor. Default font size开发者_如何学运维 is 10. I like to change that default font size. How can i do that,

---

You need to use the content_css setting of tinymce to set a custom css file of your own (make sure this setting points to a valid location of a css file). This file will be inserted in the editor iframes head after all other css settings(files from the core) are inserted there when initialising tinymce - thus all settings you place in your file will overwrite the settings made before (by tinymce).

Example: Setting the default font-size to 11px. Content of a custom css file (i named it content.css in my installation):

body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
}

How to use this setting:

tinyMCE.init({
 ...
 // you do not need to include it yourself, tinymce will do this for you, 
 // but you will need to give tinymce the location of your css file
 content_css : "http://www.myserver.com/css/content.css", 
     ...
});

---

I have used in my project in this way

tinymce.init({
  selector:"#txt1",
  setup : function(ed)
  {
    ed.on('init', function() 
    {
        this.execCommand("fontName", false, "tahoma");
        this.execCommand("fontSize", false, "12px");
    });
  }  
}); 

This is the better way than just changing property values in 'content.css'

---

Just add this line to the options

content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",

so it looks like this

tinymce.init({
    selector: "textarea",theme: "modern",width: '100%',min_height:350 ,menubar:false,
     content_style: ".mce-content-body {font-size:15px;font-family:Arial,sans-serif;}",
    browser_spellcheck : true,
    plugins: 
    [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak",
         "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
         "table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
    ],
   toolbar1: " undo redo preview code | \n\
                 link  bold italic underline | hr | image responsivefilemanager media |unlink anchor  | ",
   image_advtab: true ,

   external_filemanager_path:"/tinymce/filemanager/",
   filemanager_title:"Responsive Filemanager" ,
   relative_urls: false,
    remove_script_host : false,
   external_plugins: { "filemanager" : "/tinymce/filemanager/plugin.min.js"}
 });

---

<script type="text/javascript">
    tinyMCE.init({
        mode : "textareas",
            setup : function(ed)
            {
                // set the editor font size
                ed.onInit.add(function(ed)
                {
                ed.getBody().style.fontSize = '10px';
                });
            },
            });
</script>

---

Or just find css file that is used by tinymce and change font-size. For example if You using simple theme then go somewhere like this: js/themes/simple/skins/default/content.css and there change font-size. Working for me.

---

I'll yust leave this here, with tinyMCE 4 it is now:

setup : function(ed) {
 ed.on('init', function(ed) {
  ed.target.editorCommands.execCommand("fontName", false, "Calibri");
  ed.target.editorCommands.execCommand("fontSize", false, "11pt");
 });
}

---

A mix of the answers here worked for me:

        base_url: '/tinymce',
        suffix: '.min',
        plugins: 'image link lists',
        menubar: false,
        toolbar: 'bold italic underline | bullist numlist | link unlink image | alignleft aligncenter alignright alignjustify',
        branding: false,
        image_uploadtab: true,
        contextmenu_never_use_native: true,
        setup : function(ed) {
            ed.on('init', function(ed) {
                this.getBody().style.fontSize = '12px';
            });
        }

---

in tinymce/themes/advanced/skins/o2k7/content.css add css:

#tinymce {  font-size: 15px;}

---

One option is content_style where you can add extra css to the editor.

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_style: "div, p { font-size: 15px; }"
});

Unfortunately you can't just set body without !important because of the order they set the css.

Also I don't allow people to change the font size - and this will likely go haywire.

This helped me out in changing the 'default' size as viewed, but you need to be cautious if you let people change the font size after this.

For me this quick and dirty approach was all I needed because the HTML I am editing is super simple.

---

Simply edit

tinymce/themes/advanced/skins/o2k7/content.css

and change font-size at this line:

body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}

---

Following worked for me:

CSS Path:

tinymce/js/tinymce/skins/lightgray/content.min.css

body{background-color:#fff;color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;

I changed from 11px to 14ox.

---

To change the default font size in TinyMCE, you can use content_css or content_style (or a combination of both) in the initialization script, depending on your use case.

content_css can be used to load a specific stylesheet.

For example (where font-size is set on the body element in a file called mycontent.css):

content_css : '/mycontent.css'

content_style can be used to tweak (or override) parts of whatever stylesheet the editor is using, regardless of whether that is the default editor CSS or one you’ve specified with content_css.

For example:

content_style: 'body { font-size: 12px; }'

More info and examples here: https://www.tiny.cloud/blog/how-to-change-the-default-font-family-size-and-color-in-tinymce.

---

Set default font size: Add these options. Working with version: 4.8.5 (2018-10-30)

fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt", 
content_style: "body {font-size: 9pt;}"

---

As far as I am aware, TinyMCE inherits font size defined for the parent tag for instance the<body> tag

---

Here's how to do it without any coding

1. Use the plugin 'TinyMCE Advanced'
2. Activate it in settings.

More detailed instructions here.