Thursday, May 21, 2015¶

Changing the default font-size used by TinyMCE¶

Continued to work on #237. My problem is: I think I did exactly as explained under content_css, but my custom css file is being ignored.

In the <head> section of the main HTML document I have:

<script type="text/javascript" src="/static/byteforce/Ext.ux.TinyMCE.js"></script>
<script language="javascript" type="text/javascript">
    tinyMCE.init({
        content_css : "/static/tinymce_content.css",
        theme_advanced_font_sizes : "12px,13px,14px,16px,18px,20px,24px",
        font_size_style_values : "12px,13px,14px,16px,18px,20px,24px",
        theme : "advanced",
        mode : "textareas"
    });
</script>

This is generated by the get_head_lines method of lino.modlib.tinymce.

I created lino/modlib/tinymce/static/tinymce_content.css as a copy of tiny_mce/themes/advanced/skins/default/content.css, changed the font-size in the first line:

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

I tested whether the development server delivers the content of that file under /static/tinymce_content.css.

The TinyMCE editor itself works.

But the default font continues to have a size of 10pt, not 12px.

When I inspect the DOM, I see that the editor is rendered as an iframe:

<iframe style="width: 668px; height: 159px; display: block;" title="Texte richeFaites ALT-F10 pour accéder à la barre d'outils. Faites ALT-0 pour accéder à l'aide" allowtransparency="true" src="javascript:&quot;&quot;" id="ext-comp-3452_ifr" frameborder="0">

<html>
<head xmlns="http://www.w3.org/1999/xhtml">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="http://127.0.0.1:8000/static/tinymce-3.5.11/themes/advanced/skins/default/content.css">
  <link type="text/css" rel="stylesheet" href="http://127.0.0.1:8000/static/extjs/lino.css">
</head>
<body dir="ltr" spellcheck="false" id="tinymce" class="mceContentBody " onload="window.parent.tinyMCE.get('ext-comp-3452').onLoad.dispatch();" contenteditable="true">
  <p>foo<br data-mce-bogus="1"></p>
</body>
</html>

</iframe>

And indeed, there is no mention of the custom css file specified in my content_css option.

Tilt! the explanation was that the call to tinyMCE.init() in my page source code (the one generated by get_head_lines) had no effect at all because TinyMCE initialization is done again by Lino.RichTextPanel (defined in lino/modlib/tinymce/config/tinymce/tinymce.js, i.e. the code snippet included with the lino_*.js). I can even remove the get_head_lines method of lino.modlib.tinymce.