CODEWITHSUNDEEP
javascriptckeditor
LewlSauce
LewlSauce

Reputation: 5872

Changing default font size of Ckeditor's textarea

So there seems to be many questions about this, but not sure if there are any solutions on the latest Ckeditor version 4. I'm simply trying to change the default font from Times New Roman, and I have access to the editor.css file of the skin that I'm using.

Some suggestions that I've tried without any success are adding this to the editor.css file:

body, p {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: rgb(41, 41, 42);
    font-size: 13px;
    color: rgb(103, 106, 108);
    overflow-x: hidden;
}

I've also tried to add this into the config.js file of CKeditor:

config.contentsCss = ["body {font-size: 20px;}"]

within the CKEDITOR.editorConfig = function( config ) { } block, as well as adding this underneath it:

CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '28px';

Still no luck. Not quite sure why this is so difficult. Any suggestions?

I've even added a "catch all" in the editor.css and that still doesn't work:

* {
 font-size: 14px;
 font-family: Arial;
}

That affects literally everything on the site except for what's in the textbox of the texteditor. Now mind you the fullPage option is enabled, resulting in the textarea being in an iframe, but not sure if that would make a difference.

I've tried solutions from the other stackoverflow questions, but they still do not change the font size within the text editor, just everything else.

** EDIT **

So here's what my texteditor looks like:

enter image description here

This is what each texteditor looks like by default, so apparently changing the contents.css file isn't affecting it. I guess I need to figure out why there's no reference to the contents.css file in the head tag of the HTML document.

Upvotes: 1

Views: 2912

Answers (3)

Sergey Prihodko
Sergey Prihodko

Reputation: 11

Added to html code and it worked:

<script> CKEDITOR.addCss(".cke_editable { font-size: 16px;}"); </script>

Upvotes: 1

LewlSauce
LewlSauce

Reputation: 5872

After what seems like forever and a day, I simply added this to my custom config.js file:

CKEDITOR.addCss("body {font-size: 10px}");

and this solved my issue.

Upvotes: 0

j.swiderski
j.swiderski

Reputation: 2445

The contentsCss points to CSS file which is used to style editor content area for classic editor (inline editor is part of page so you need to add appropriate styles to that page to style editor contents). By default this file is located in ckeditor/contents.css. Please simply open that file, find definition for body element, change font-family to value you want to use. Next find the definition for .cke_editable (this class is being assigned to body element) and change font-size to value you want to use. Below is the sample configuration and the result.

body
{
    /* Font */
    font-family: "Comic Sans MS";
    font-size: 12px;

    /* Text color */
    color: #333;

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

    margin: 20px;
}

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

    /* Fix for missing scrollbars with RTL texts. (#10488) */
    word-wrap: break-word;
}

enter image description here

What may be confusing is that dropdowns don't react to styles from external CSS files. They only react to inline styles assigned to HTML elements and only if there is an exact match (they are not fully context sensitive). You can however verify default font being used with browser dev-tools.

Upvotes: 1

Related Questions