Изменение размера шрифта по умолчанию для текстовой области Ckeditor

Question

Так что, похоже, есть много вопросов по этому поводу, но я не уверен, есть ли какие-либо решения в последней версии Ckeditor 4. Я просто пытаюсь изменить шрифт по умолчанию на Times New Roman, и у меня есть доступ к editor.css файл скина, который я использую.

Некоторые предложения, которые я попробовал безуспешно, добавляют это в файл editor.css:

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

Я также пытался добавить это в config.js файл CKeditor:

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

внутри блока CKEDITOR.editorConfig = function( config ) { }, а также добавление под ним:

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

Все еще не повезло. Не совсем уверен, почему это так сложно. Какие-либо предложения?

Я даже добавил «поймать все» в editor.css, и это все еще не работает:

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

Это затрагивает буквально все на сайте , кроме того, что находится в текстовом поле текстового редактора. Теперь учтите, что опция fullPage включена, в результате текстовая область находится в iframe, но не уверен, что это изменит ситуацию.

Я пробовал решения из других вопросов stackoverflow, но они все еще не меняют размер шрифта в текстовом редакторе, просто все остальное.

** РЕДАКТИРОВАТЬ **

Так вот как выглядит мой текстедитор:

Так выглядит каждый текстовый редактор по умолчанию, поэтому, очевидно, изменение файла contents.css не влияет на него. Наверное, мне нужно выяснить, почему в теге head HTML-документа нет ссылки на файл contents.css.

Answer 1

После того, что кажется вечным, я просто добавил это в свой файл config.js:

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

и это решило мою проблему.

Answer 2

contentsCss указывает на файл CSS, который используется для стилизации области содержимого редактора для классического редактора (встроенный редактор является частью страницы, поэтому вам необходимо добавить соответствующие стили для этой страницы в содержимое редактора стилей). По умолчанию этот файл находится в ckeditor/contents.css. Пожалуйста, просто откройте этот файл, найдите определение элемента body, замените font-family на значение, которое вы хотите использовать. Затем найдите определение для .cke_editable (этот класс присваивается элементу body) и замените font-size на значение, которое вы хотите использовать. Ниже приведен пример конфигурации и результат.

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

Что может сбить с толку, так это то, что выпадающие списки не реагируют на стили из внешних файлов CSS. Они реагируют только на встроенные стили, назначенные элементам HTML, и только при наличии точного соответствия (они не являются полностью контекстно-зависимыми). Однако вы можете проверить шрифт по умолчанию, используемый с инструментами разработчика браузера.