Question

I am using TinyMCE and I want to set the default font-size to 12.

Here, I assigned a variable to the active TinyMCE editor, but it’s not working…

HTML content:

<textarea id="text_message"></textarea>

JavaScript:

$("#text_message").tinymce({        
    // Location of TinyMCE script
    script_url: '/static/app/a/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js'
});

var fontSize = 12;
tinyMCE.activeEditor.formatter.apply('fontSize', 
{
    value: fontSize
});

Answer 1

There’s a couple of different event stages you should wait for:

1. The page is ready in some state. (tinyMCE.init() can also be used, depending on the situation.)
2. The editor has been initialized and is ready for you to being working on it.

The first can be accomplished using either:

$(document).ready()

Or:

$(window).load()

Both handle events related to the readiness of the page. $.ready() triggers when the DOM is available, $.load() in the case of window triggers when the page content has been loaded (such as inline img, script, and link sources). .ready() fires slightly before the other, but in many cases either will work.

^{Note, below I’ve got jQuery(function($){...}); which is a shortcut to $(document).ready(); and helps manage conflicts with other frameworks that use $ globally.}

At the second stage you need to add an initialization event handler to your editor creation request, such as:

$.tinymce({ init_instance_callback: function(){ ... } });

In full:

$tiny.tinymce({
    // ... other stuff here, comma-delineated
    init_instance_callback: function(){
        ac = tinyMCE.activeEditor;

        ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
    }
    // ... other stuff here, comma-delineated
});

Here is where you can set the display value for font-size (using the Javascript property of fontSize, since Javascript doesn’t allow - in labels such as font-size). This waits for the editor you’re adding to initialize and say “Hey, I’m here now”. Once you get that notification of the vent firing, you can set the editor body (what ac.getBody() returns) to be font-size: 18px.

What this means is that the font-size will not be returned once you choose the save the editor content; it’s above it in in the editor “body” (literally, the iframe‘s body element), in most cases (unless you choose the plugins : "fullpage" initialization option). So it’s a “default”, but does not get set explicitly within the content itself.

If you have Chrome or Firefox with Firebug add-on installed, watch the console on this fiddle:

http://jsfiddle.net/userdude/9PuUx/1/

Here is the working code demo and link to a fiddle demo (I use 18px to easily see the change):

jQuery(function a($){
    var $tiny = $("#text_message"),
        fontSize = '18px',
        ac;

    $tiny.tinymce({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "fontsizeselect,bold,underline,italic",
        init_instance_callback: function(){
            ac = tinyMCE.activeEditor;

            ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
        }
    });
});​

http://jsfiddle.net/userdude/9PuUx/

The tinyMCE documentation and API can be a bit confusing and lacking, and I’m not an expert in using it either, so I know there’s perhaps four or five other ways to interpret what’s going on and how to do this. Your mileage may vary. If you have an issue with the way I did this or it does not seem to do what you want or expect, just leave a comment and let me know.