CODEWITHSUNDEEP
djangotinymce
varad
varad

Reputation: 8029

django change font size and font family in tinymce

I have this script in my base file...

<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>
tinymce.init({selector:'textarea',
plugins: [
    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    "searchreplace wordcount visualblocks visualchars code fullscreen",
    "insertdatetime media nonbreaking save table contextmenu directionality",
    "emoticons template paste textcolor colorpicker textpattern"
    ],
});
</script>

In my tinymce text editor I see font of size I guess 10 px but I want to change it to 16 px and also want to change the font family..

Any help ??

Upvotes: 3

Views: 4507

Answers (3)

openHBP
openHBP

Reputation: 691

To set default font size, just add the line 'content_style': '.mcecontentbody{font-size:13px;}', in TINYMCE_DEFAULT_CONFIG variable of settings.py

TINYMCE_DEFAULT_CONFIG = {
    'theme': 'advanced',
    'relative_urls': False,
    'plugins': 'media,spellchecker',
    'content_style': '.mcecontentbody{font-size:13px;}',
    'theme_advanced_buttons1': 'bold,italic,underline,bullist,numlist,|,link,unlink,image',
    'theme_advanced_resizing': True,
    'theme_advanced_path': False,
}

Upvotes: 3

Leo Skhrnkv
Leo Skhrnkv

Reputation: 1703

Please see the settings.py config that worked for me:

TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced", # default value
'relative_urls': False, # default value
'plugins': 'table,spellchecker,paste,searchreplace',
'theme_advanced_buttons1': 'bold,italic,underline,bullist,numlist,link,unlink,styleselect,fontselect,fontsizeselect',
'width': '100%',
'height': 300,
'paste_text_sticky': True,
'paste_text_sticky_default': True,
'valid_styles': 'font-weight,font-style,text-decoration',
'fontsize_formats': "8pt 10pt 11pt 12pt 13pt 14pt 16pt 18pt 20pt 24pt 36pt",
'font_formats': "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",}
TINYMCE_SPELLCHECKER = True
TINYMCE_COMPRESSOR = True

Here is a screenshot:

TinyMCE

Upvotes: 2

inejc
inejc

Reputation: 570

Take a look at the tinyMCE configuration docs. There are two suitable settings for your needs: font_formats and fontsize_formats and are used like this:

tinymce.init({
    fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
    font_formats: "Arial=arial,helvetica,sans-serif;"
});

Upvotes: -1

Related Questions