Оптимальная конфигурация CKEDITOR_CONFIGS приложения ckeditor в Django

Для того чтобы сконфигурировать популярный html-редактор ckeditor под себя, нужно добавить CKEDITOR_CONFIGS в settings.py проекта. Наиболее оптимальная настройка, которой я пользуюсь:

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline',
             '-', 'Link', 'Unlink', 'Anchor',
             '-', 'Format',
             '-', 'Maximize',
             '-', 'Table',
             '-', 'Image',
             '-', 'Source',
             '-', 'NumberedList', 'BulletedList'
            ],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
             '-', 'Font', 'FontSize', 'TextColor',
             '-', 'Outdent', 'Indent',
             '-', 'HorizontalRule',
             '-', 'Blockquote'
            ]
        ],
        'height': 500,
        'width': '100%',
        'toolbarCanCollapse': False,
        'forcePasteAsPlainText': True
    }
}

Undo, Redo - отменить, повторить шаг
ShowBlocks - показать/скрыть блоки параграфов
Bold, Italic, Underline - сделать текст жирным, курсивным, подчёркнутым
Link, Unlink, Anchor - добавить, убрать ссылку; добавить якорь
Format - выбор формата (h1, h2 и т.д.)
Maximize - развернуть во весь экран (очень удобно:) )
Table - вставить таблицу
Image - вставить картинку
Source - переключиться в редактор исходного кода
NumberedList, BulletedList - использовать нумерованный, маркированный лист
JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock - выравнивание по левому краю, центру, правому краю, по ширине блока
Font, FontSize, TextColor - изменить шрифт, его размер, и цвет текста
Outdent, Indent - отступы влево, вправо
HorizontalRule - горизонтальная линия (hr)
Blockquote - пометить блок как цитату
width, height - ширина и высота редактора
forcePasteAsPlainText - вставлять текст из других источников (например, word) как простой текст (то бишь избавляет от стороннего тег-мусора)

Использование djangocms-text-ckeditor

Я разрабатываю клиентские сайты, используя фреймворк django-cms и djangocms-text-ckeditor в качестве редактора.

Если и вы используете плагин djangocms-text-ckeditor, то конфиг может выглядеть следующим образом:

def toolbar_items(cms=True):
    _item = ['cmsplugins', '-', 'ShowBlocks'] if cms else ['ShowBlocks', ]
    return [['Undo', 'Redo'],
            _item,
            ['Format', 'Styles'],
            ['Bold', 'Italic', 'Underline', '-', 'Link', 'Unlink', 'Anchor', '-', 'Table', '-',
             'NumberedList', 'BulletedList', '-', 'RemoveFormat'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
             '-', 'FontSize', 'TextColor', 'BGColor',
             '-', 'Outdent', 'Indent',
             '-', 'HorizontalRule',
             '-', 'Blockquote'],
            ['Find', ],
            ['Maximize', ],
            ['Source', ]]

CKEDITOR_SETTINGS = {
    'language': '{{ language }}',
    'toolbar_CMS': toolbar_items(),
    'toolbar_HTMLField': toolbar_items(False),
    'skin': 'moono',
    'forcePasteAsPlainText': True,
    'format_tags': 'p;h1;h2;h3;pre',
    'contentsCss': ['/static/my_app/css/ckeditor_init.css', ],
    'stylesSet': [{'name': 'Строчный код', 'element': 'code'},
                  {'name': 'Скрыть для мобильных', 'element': 'span', 'attributes': {'class': 'hide_for_mobile'}},
                  {'name': 'Монолитный элемент', 'element': 'span', 'attributes': {'style': 'white-space: nowrap;'}},
                  {'name': 'Адаптивная таблица', 'element': 'div', 'attributes': {'class': 'table-responsive'}}],
    'fontSize_sizes': '8/8px;9/9px;10/10px;11/11px;12/12px;13/13px;14/14px;15/15px;16/16px;17/17px;18/18px;19/19px;20/20px;'
                      '21/21px;22/22px;23/23px;24/24px;25/25px;26/26px;27/27px;28/28px;36/36px;48/48px;72/72px;1/1px;',
}

Обратите внимание, что добавляем метод toolbar_items(cms=True) для того, чтобы использовать настройки редактора ckeditor как для поля HTMLField в models.py, так и для самого плагина djangocms-text-ckeditor. Флаг cms в методе toolbar_items добавляет дополнительную кнопку cms-plugins, функциональность которой реализована в djangocms-text-ckeditor.

Плюс к этому, я определил свой набор стилей stylesSet и размеров шрифта fontSize_sizes - стало гораздо удобнее.

В contentsCss прописываются пути к дополнительным css стилям, которые можно подгрузить в редактор. Пример моего ckeditor_init.css:

body, select, input, textarea, button, table, a, p {font-size: 18px;}

p {line-height: 26px; margin: 10px 0;}
ol > li, ul > li {line-height: 23px;margin-left: 30px;}

pre {display: block;background: #F0F0F0;position: relative;padding: 6px 26px 6px 6px;word-wrap: break-word;white-space:pre-wrap;margin: 16px 0;line-height: 21px;font-family: 'Courier New', cursive;font-size: 14px;}
code {background: #ececec;color: #151515;font-size: 16px;}

h1,h2,h3,h4,h5,h6 {font-weight: bold;margin: 16px 0 10px;}
h1 {font-size: 26px;margin-top: 32px;}
h2 {font-size: 23px;margin-top: 26px;}
h3 {font-size: 20px;margin-top: 21px;}
h4, h5, h6 {font-size: 18px;}

Ещё обратите внимание, что я намерено убрал кнопку Font, так как клиенты могут испортить дизайн сайта разными шрифтами. Хоть они и без этого могут его изрядно попортить, увеличив размеры шрифта и цвет букв и т. д. Но, как показывает практика, они так чаще всего не делают, но шрифт меняют - всё это приводит к не очень-то хорошему виду.

P.S. Более подробную информацию о найстройке редактора ckeditor можно найти здесь.