Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing the default font family in TinyMCE

I've successfully changed the default font inside the editor using the documentation here but that leaves me with a problem. The original default font no longer works in the font drop down list.

Original default: Verdana
New default: MyCustomFont

When I type into the editor I see my MyCustomFont font by default. If I try to change that to Verdana (original default) nothing happens. I can change it to any font family except Verdana. I noticed also that when I select MyCustomFont in the drop down list the content gets surrounded with a span with inline styles. This does not happen with the original default font (hence why nothing happens).

It seems to me like there's a key piece of documentation missing - how to tell the editor (the font feature in particular) that the font I've defined by default in the css is the default font.

I've Googled quite a bit but had no results. Everybody else seems to be settling for the documentation mentioned above. Am I the only one having this problem? If not, please help! :)

Please note, the answers to this question do not answer my question.

like image 699
Paul Fleming Avatar asked Jul 29 '13 12:07

Paul Fleming


People also ask

How do I change the default font size in TinyMCE editor?

Set the default font size for the editor If you want to change the default font size of the editor, you can configure the TinyMCE CSS using the content_css or content_style options.

What is the default font family?

In browsers I use (Chrome, Opera, Firefox) default fonts are: Standard font: Times New Roman, Serif font: Times New Roman, Sans-serif font: Arial, Monospaced or fixed-width: Consolas (Firefox: Courier New).


2 Answers

maybe too late but...

$('.tinymce').tinymce({
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.execCommand("fontName", false, "Arial");
            ed.execCommand("fontSize", false, "2");
        });
    }
});

EDIT

For TinyMCE 4, as @jason-tolliver and @georg states, the syntax is:

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});
like image 126
geedelur Avatar answered Sep 19 '22 12:09

geedelur


// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});
like image 20
Radius Kuntoro Avatar answered Sep 17 '22 12:09

Radius Kuntoro