Как подключить свой css файл для плагина CKeditor в Cotonti Siena
Рассмотрим 2 способа подключения css файла стилей в плагине редактора CKeditor для CMF Cotonti
Как подключить свой css файл для плагина CKeditor в Cotonti Siena

Как подключить свой css файл для плагина CKeditor в Cotonti Siena

Эта маленькая заметка по подключению стилей к html редактору ckeditor для котонти. Речь пойдет именно о плагине для cotonti.


В свое время очень захотелось видеть как будет выглядеть текст в статье, сразу во время написания его в редакторе. По умолчанию редактор берет стили из файла plugins/ckeditor/lib/contents.css Не всегда стили в этом файле совпадают со стилями вашей темы. 

Есть два варианта увидеть текст в редакторе таким, какой он будет у вас на странице.

Вариант 1: Исправить стили в файле contents.css под вашу тему сайта.

Вариант 2: Подключить свой собственный css файл к редактору, который будет лежать в папке вашей темы.

Подключения CSS к CKeditor в Cotonti Siena

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

Для подключения своего файла к редактору, нам будет необходимо в конфигурационном файле редактора, добавить указатель на необходимый файл.

Для этого мы должны открыть файл plugins/ckeditor/lib/config.js и вписать, между скобок функции загрузки конфигурации редактора, строку

config.contentsCss = 'путь к файлу css';  - если один файл css, или 

config.contentsCss = ['путь к файлу css','путь ко второму файлу css'];  - если вы хотите подключить несколько файлов.

Пример:

 config.contentsCss = '/themes/cotonti_ru/css/ckeditor.css';  - тут я указал путь к файлу, который находится в теме сайта. Это очень удобно. Можно к каждой теме прописывать свой файл для редактора.

Способ второй: правильный для Cotonti версии выше 0.9.15.

Правильность подключения тут в том, что плагин ckeditor сам подключит файлф css, которые вы ему укажите. Для этого открываем php файл вашей темы.

Например у вас стандартная тема nemesis. Тогда открываем файл themes/nemesis/nemesis.php и вставляем там код.

global $ckeditor_css_to_load;
$ckeditor_css_to_load = array(
    $cfg['themes_dir'].'/'.$usr['theme'].'/css/bootstrap.css',
    $cfg['themes_dir'].'/'.$usr['theme'].'/css/bootstrap-theme.css'
);

Это на примере подключения файлов bootstrap.

Тепер у вас подгрузятся файлы bootstrap.css и bootstrap-theme.css при загрузке редактора.

На этом все.


Поделитесь с друзьями: