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

You can use the javascript API to add some style to a CKEditor instance

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.stylesSet.html

// The set of styles for the Styles combo
CKEDITOR.stylesSet.add( 'default',
[
    // Block Styles
    { name : 'Blue Title'       , element : 'h3', styles : { 'color' : 'Blue' } },
    { name : 'Red Title'        , element : 'h3', styles : { 'color' : 'Red' } },

    // Inline Styles
    { name : 'Marker: Yellow'   , element : 'span', styles : { 'background-color' : 'Yellow' } },
    { name : 'Marker: Green'    , element : 'span', styles : { 'background-color' : 'Lime' } },

    // Object Styles
    {
        name : 'Image on Left',
        element : 'img',
        attributes :
        {
            'style' : 'padding: 5px; margin-right: 5px',
            'border' : '2',
            'align' : 'left'
        }
    }
 ]);

Answer 3

Let us say you want to use Verdana as the default font. Here is what you can do:

1. Open contents.css and change the font:

   font-family: Verdana;

2. In the application/page where the output will be published, add this style:

   <style> .entry-content {font-family: Tahoma;} </style>

That's it! Now you have changed the default font successfully.

Answer 4

I hope this helps. Here are a few things I have noticed.

First, I really need to keep on refreshing to see the new changes appear. I edited the .css file named contents.css inside the /ckeditor/ directory, you can change these:

color: #000000;
background-color: #ffffff;
font-size:24px; /* Just added this */

I also noticed you can edit the file named editor.css inside the /ckeditor/skins/kama/editor.css directory. You can change 'kama' to whatever skin you are using. Now you can edit the .cke_contents parts.

Seems also like contents.css will overwrite what you have done in editor.css. Hope this helps guys.

Make sure you refresh or clear cache to see if any changes are being made.

Answer 5

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'});

Answer 6

Here to setting default font-size for CKEditor:

skins/editor.css

.cke_reset_all,.cke_reset_all *{font:12px}

Answer 7

When inspect the element I typed in the editor, I found it is contents.css file that actually has effects on the font style.

So go the the contents.css file inside the ckeditor directory, make this change:

.cke_editable{
font-size: 17px;
line-height: 1.6;}