Setting default font size and background color in TinyMCE

Question

Hi,

How can I set the default font size and the background color in TinyMCE?

Thanks, Eden

Answer 1

background

So basicly you would copy the themes/advanced/editor_ui.css to your own location, edit the colors and it should be ok.

.mceEditorArea {
    font-family: "MS Sans Serif";
    background: #FFFFFF;
}

font size

tinyMCE.init({
    ...
    font_size_style_values : "xx-small,x-small,small,medium,large,x-large,xx-large"
});

anyway, google is your friend

Answer 2

You can change the css using Javascript also.

Add this to your init function:

oninit : "postInitWork",

and

function postInitWork() {
    tinyMCE.getInstanceById('textedit').getWin().document.body.style.backgroundColor='#FFFF66';

    var dom = tinymce.activeEditor.dom;
    var pElements = dom.select('p'); // Default scope is the editor document.

    dom.setStyle(pElements, 'color', 'red');
}

Answer 3

Hi there,

Have you tried the content_css option? That's mentioned in the TinyMCE FAQ here: http://wiki.moxiecode.com/index.php/TinyMCE:FAQ#Change_default_text_color.2Feditor_background_in_TinyMCE.3F

You can specify a CSS file for your editor with this, allowing you to set things like font and background colour.

Hope this helps; thanks Sam

(I realise that this is a very old post, just adding this for the benefit of anyone else reading since)