Как сделать CKEditor рендерингом текста с помощью CSS?

У меня есть CKEditor, используемый для редактирования текста на веб-странице.

На веб-странице текст отображается в его контексте и поэтому следует форматирование CSS страницы.

Мой вопрос заключается в том, как сказать CKEditor применить стили CSS к рендерингу редактора? Без изменения сгенерированного источника?

Мой код:

<textarea class="ActuContent" name="actu-content" cols="100" rows="20">my content></textarea>
<script type="text/javascript">
        window.onload = function()
        {
                CKEDITOR.replace( 'actu-content' );
        };
</script>

и мой CSS:

.ActuContent{
    padding:10px 10px 10px 10px;
    color:#416a8b;
    font-size:1.6em;
}

И мой файл CKEditor Config.js содержит только конфигурацию панели инструментов.

CKeditor не применяет настройки ".ActuContent" к его рендерингу...

Ответ 1

Фактический лучший ответ на этот вопрос:

CKEDITOR.config.contentsCss = '/mycustom.css';
CKEDITOR.replace('myfield');

Потому что вы, вероятно, хотели бы иметь разные стили в разных редакторах. Если вы измените основной content.css, как Jalil сделал, вы не сможете этого сделать.

Ответ 2

Я нашел очень простой способ ответить на мой вопрос:

файл content.css в каталоге CKEditor!

Мне нужно было только вставить стиль, который я хотел бы применить в редакторе:

body {
    color: #416a8b;
    font-family: Arial;
    font-size: 18px;
    font-weight: 400;
   text-align: left;
}

Что все: -)

Ответ 3

Смотрите это сообщение:

CKEditor: класс или идентификатор для тела редактора

Решение, отправленное nemisj, будет устанавливать имя класса в тело редактируемой области редактора.

Вы можете сделать это в функции onload редактора. Вызовите это, прежде чем звонить .replace.

CKEDITOR.on( 'instanceReady', function( ev )
     {
         CKEDITOR.instances.e1.document.$.body.className = "foo";
     });

Ответ 4

Иногда, когда мне нужно устанавливать некоторые стили в CKEditor "на лету", например, в зависимости от пользовательских настроек, я использую функции setStyle() и setStyles() в объекте body редактора. Пример кода:

var editor = CKEDITOR.instances.editor1;
var size = ... // assign size value
editor.document.getBody().setStyle('font-size',size);

Еще один пример:

var editor = CKEDITOR.instances.editor1;
var styles = {
    "font-family": "Arial",
    "color": "#333"
};
editor.document.getBody().setStyles(styles);

Ответ 5

CKEditor использует DIV с обычными HTML-элементами для представления текста, который вы редактируете. Просто просмотрите содержимое этого DIV и напишите соответствующую таблицу стилей.

Конечно, это работает только в том случае, если вы не модифицируете вывод CKEditor перед его рендерингом.

Ответ 6

Если вы изменили файл content.css, вы можете обнаружить, что он был кэширован. Это не тривиальная задача обновить его в вашем браузере, так как CKEDITOR.timestamp добавляется только в js файлы. Я придумал следующее решение:

// force to update all plugin files and styles
CKEDITOR.timestamp = '25062014';
CKEDITOR.config.contentsCss = CKEDITOR.config.contentsCss + '?' + CKEDITOR.timestamp;