Changing default font size of Ckeditor's textarea

Question

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:

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.

Answer 1

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

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.

Answer 2

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.

Answer 3

添加到 html 代码并且它起作用了：

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