How to set default font-size on CKEditor

Question

I am having a problem setting a default font-size for a CKEditor Instance. I have tried googling but found nothing that answers my question.

I have a page which takes an input for a website. There are 3 Editor instances and I have to make the default font-size of the first instance to, say about 20 to 30px.

I have tried modifying contents.css found inside CKEDITOR folder and changing the font-size there but it affects all the 3 editor instances

/*
    Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
    For licensing, see LICENSE.html or http://ckeditor.com/license
    */

body
{
    /* Font */
    font-family: Georgia;
    font-size: 12px;

    /* Text color */
    color: #222;

    /* Remove the background color to make it transparent */
    background-color: #fff;
}

ol,ul,dl
{
    /* IE7: reset rtl list margin. (#7334) */
    *margin-right:0px;
    /* preserved spaces for rtl list item bullets. (#6249)*/
    padding-right:40px;
}

Anybody have been able to figure out how to solve this? Any help is very much appreciated!..

Thank you in advance guys..

mhond

Answer 1

I hope the answers above help some people. They did not help me and here's why. Using firebug, I could see that about:blank had a default font for the p tag which overrode my setting in the contents.css file as mention above. Here's what I did to fix it. I added a p to the body tag and added !important to the font-family and font-size lines:

body, p {
    /* Font */
    font-family: Arial, Verdana, sans-serif !important;
    font-size: 12px !important;

    /* Text color */
    color: #000;

    /* Remove the background color to make it transparent */
    background-color: #fff;
}

Worked great! I hope this helps.

Answer 2

Applying styles in text-area of CKEditor in page example :

CKEDITOR.replace('textarea', {contentsCss: ".cke_editable{font-size: 18px; font-family:muna;}" , font_defaultLabel : 'Muna' , fontSize_defaultLabel : '18px'});