How to change default font size in tinymce?

Question

I am using jquery tinymce editor. Default font size is 10. I like to change that default font size. How can i do that,

if you're working with django have a look to https://stackoverflow.com/a/47181703/7639622 — openHBP, Nov 08 '17 at 14:31

Thariama · Accepted Answer · 2010-12-13T09:41:30.640

59

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", 
     ...
});

edited Dec 13 '10 at 09:41

answered Dec 13 '10 at 09:36

Thariama

50,002
13
138
166

1

Where i need to include this css. since my main page also being get affected if i insert in same page. Where to insert this css and how to access it. – Mohan Ram Dec 13 '10 at 09:40
I am sorry to give unnecssary comments. It works for me. I had changed font size in content.css directly, Thank u – Mohan Ram Dec 13 '10 at 09:58
glad to have been able to help – Thariama Dec 13 '10 at 09:58
@Thariama how do you add a dropdown for font size – meda Jun 07 '13 at 20:39
@meda: are you using tinyme3 or tinymce4? – Thariama May 12 '15 at 13:09
1

@meda: true, but i saw this just now :) is your problem solved then? :) – Thariama May 12 '15 at 15:07
@Thariama the project was since suspended but I will let you know when it resumes, I do appreciate your reaching out to me – meda May 12 '15 at 15:08
however when I am using grunt my CSS will be vanished. This would not work if I am using task runners like grunt or gulp. – Ankit Tanna Jun 10 '15 at 07:58
@Thariama This works properly, but i don't get html code for font family & font size when in check this in html editor – punter Jan 09 '17 at 13:27

Nishad Up · Answer 2 · 2017-09-20T15:49:05.167

27

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'

edited Sep 20 '17 at 15:49

answered Apr 13 '15 at 06:17

Nishad Up

3,457
1
28
32

this.execCommand("fontSize", false, "12px"); did not work for me on tmce 4 with (google chrome 51) this.getBody().style.fontSize = '12px'; from KwangKungs answer however did. – Max Jun 08 '16 at 15:52
1

Unfortunately this sets the focus to the editor. Can this be avoided? – Mario Eis Apr 09 '19 at 18:01
@MarioEis there's a fourth argument that receives `{ skip_focus: true }`. This seems to be poorly documented and **not** work as of 6.3.1. How did you solve this? – Minh Nghĩa Feb 21 '23 at 03:49

score 22 · Answer 3 · answered Oct 21 '16 at 13:26

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"}
 });

This was the simplest way of doing it for me in TinyMCE 4.6.1 — Autumn Leonard, Jun 29 '17 at 17:05

score 5 · Answer 4 · answered Aug 22 '14 at 06:35

5

<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>

answered Aug 22 '14 at 06:35

KwangKung

169
1
7
16

1

second ed parameter is not passed somehow - "this" works – Srneczek Dec 27 '15 at 09:39
Seems not to work anymore in 4.6 (whether with ed or this: TypeError: undefined is not an object (evaluating 'ed.onInit.add') – Jonny May 09 '17 at 19:00

score 2 · Answer 5 · answered Mar 17 '16 at 13:11

2

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");
 });
}

answered Mar 17 '16 at 13:11

Georg

183
4
18

1

It works, but: If you set f.e. the fontSize to 12 pt and then you press back-delete in a empty editor window it will reset to fontSize 11 (tinymce's default). – Jonny May 29 '18 at 17:39

score 2 · Answer 6 · answered Sep 12 '11 at 11:43

2

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.

answered Sep 12 '11 at 11:43

krzyhub

6,285
11
42
68

score 1 · Answer 7 · answered Oct 03 '19 at 20:35

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';
            });
        }

You can also add the font-family with this.getBody().style.fontFamily = 'Proxima Nova Alt'; — mrbangybang, Oct 03 '19 at 20:39

score 0 · Answer 8 · answered Feb 03 '15 at 13:27

0

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

#tinymce {  font-size: 15px;}

answered Feb 03 '15 at 13:27

Dũng IT

2,751
30
29

score 0 · Answer 9 · answered Sep 04 '16 at 20:49

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.

score 0 · Answer 10 · edited Jan 18 '17 at 08:50

0

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;}

edited Jan 18 '17 at 08:50

AFract

8,868
6
48
70

answered Jan 18 '17 at 08:22

HRN

27
7

score 0 · Answer 11 · answered Aug 08 '19 at 03:28

0

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.

answered Aug 08 '19 at 03:28

TopQnA

101
2

score 0 · Answer 12 · answered Nov 29 '19 at 05:40

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.

Billu · Answer 13 · 2021-03-19T19:42:49.563

0

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;}"

edited Mar 19 '21 at 19:42

answered Jan 11 '21 at 13:18

Billu

2,733
26
47

score -1 · Answer 14 · answered Dec 13 '10 at 09:34

-1

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

answered Dec 13 '10 at 09:34

Aditya Manohar

2,204
1
17
20

How to change that explain me. – Mohan Ram Dec 13 '10 at 09:36
@Thariama I think it's obvious – JSON Jul 13 '16 at 19:09

score -3 · Answer 15 · answered Apr 07 '15 at 09:17

-3

Here's how to do it without any coding

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

More detailed instructions here.

answered Apr 07 '15 at 09:17

shadowoflight_

43
5

How to change default font size in tinymce?

15 Answers15