Оптимальная конфигурация 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 можно найти здесь.

Оцените статью

4.5 из 5 (всего 8 оценок)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Артём Мальцев

Веб-разработчик, владеющий знаниями языка программирования Python, фреймворка Django, системы управления содержимым сайта Django CMS, платформы для создания интернет-магазина Django Shop и многих различных приложений, использующих эти технологии.

Права на использование материала, расположенного на этой странице https://vivazzi.pro/ru/it/ckeditor-config/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Артём Мальцев
Ссылка на статью: <a href="https://vivazzi.pro/ru/it/ckeditor-config/">https://vivazzi.pro/ru/it/ckeditor-config/</a>

Больше: Правила использования сайта

Представляю вашему вниманию книгу, написанную моим близким другом Максимом Макуриным: Секреты эффективного управления ассортиментом.

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

Комментарии: 17

Дмитрий
Дмитрий

24.02.2018 6:58 #

Огромное спасибо, за статью, уже второй раз к вам на сайт попадаю, видно годное дело делаете. Уже хотел установить и настроить django-tinymce, как тут нашел адекватные настройки для ckeditor, так как не знал как его заставить подстраиваться под размер экрана благодаря вам узнал. Вопрос, а как сделать комментарии такие как у тут, что бы ограничить вывод полей, я так понимаю как-то через формы?

Ответить

Артём Мальцев
Артём Мальцев автор

26.02.2018 2:18 #

Дмитрий, рад, что статья оказалась для вас полезной!

Да, для ограничения вывода полей лучше использовать настройки класса формы. Вот реальный пример моей формы для этого сайта:

class CommentForm(forms.Form):
    parent_id = forms.IntegerField(widget=forms.HiddenInput(), initial=0)
    name = forms.CharField(label=pgettext_lazy('sbl Name', 'Name'), required=False,
                           widget=forms.TextInput(attrs={'placeholder': _('Fill in if you want')}))
    message = forms.CharField(label=_('Comment'), widget=MarkdownEditorWidget(attrs={'rows': 7}))
    content_id = forms.IntegerField(widget=forms.HiddenInput())
    content_type = forms.IntegerField(widget=forms.HiddenInput())

    def save(self, auth_user):
        if self.is_valid():
            content_id = self.cleaned_data.get('content_id')
            content_type = self.cleaned_data.get('content_type')
            parent_id = self.cleaned_data.get('parent_id')
            message = self.cleaned_data.get('message')
            obj = ContentType.objects.get(pk=content_type).get_object_for_this_type(pk=content_id)
            data = {'text': message, 'content_object': obj}

            if auth_user.is_authenticated:
                data['user'] = get_user_model().objects.get(email=auth_user.email)
            else:
                data['name'] = self.cleaned_data.get('name') or _('Guest')

            c = Comment(**data)
            c.parent_id = parent_id
            c.save()
            return c

        return False

widget=forms.HiddenInput() - определяет тип input-а скрытым (поэтому остаётся видимым только поле name и message).

В шаблоне вывожу так:


    {% for hidden in comment_form.hidden_fields %}{{ hidden }}{% endfor %}

    {% for item in comment_form.visible_fields %}
        {% if item.name != 'name' or item.name == 'name' and not request.user.is_authenticated %}

                {{ item.label }}

                    {{ item }}
                    {{ item.errors }}


        {% endif %}
    {% endfor %}

    {% trans 'Send' %}

За основу системы комментирования взял http://larin.in/archives/74 и доделал под свои нужды.

Ответить

Константин
Константин

01.09.2020 4:23 #

Добрый день.
Спасибо за твои статьи.

Не подскажешь как сделать поле не обязательным?
В модели стоит все нормально
detail = models.TextField(blank=True, verbose_name='Описание')

когда добавляю CKEditor
detail = forms.CharField(label='Описание', blank=True, widget=CKEditorUploadingWidget())
ставлю blank=True ругается

сюда ставлю тоже ругается
detail = forms.CharField(label='Описание', widget=CKEditorUploadingWidget(blank=True))

Ответить

Артём Мальцев
Артём Мальцев автор

02.09.2020 4:12 #

Константин, добрый день!
Не знаю, почему ему не нравится. По идее должен работать. Нужно дебажить метод save() и clean() в форме

Ответить

Константин
Константин

02.09.2020 9:01 #

Спасибо . Я уже изменил на RichTextUploadingField с ним работает нормально )

Ответить

Артём Мальцев
Артём Мальцев автор

02.09.2020 12:15 #

О, это хорошо, что получилось! И другим полезно будет узнать :)

Ответить

Pavel
Pavel

24.03.2021 20:06 #

На вопрос Константина : Чтобы поле можно было оставлять пустым надо написать та к detail = forms.CharField(label='Описание', empty_value=True, widget=CKEditorUploadingWidget())

Ответить

Pavel
Pavel

24.03.2021 20:19 #

Сорри, в предыдущем комменте не тот параметр указал (empty_value='какой-то текст ' - ставит в поля текст, указанный в кавычках, по умолчанию), если же надо чтобы поле было не обязательно к заполнению - ставим required=False : detail = forms.CharField(label='Описание', required=False, widget=CKEditorUploadingWidget())

Ответить

Артём Мальцев
Артём Мальцев автор

26.03.2021 7:24 #

Да-да, кстати, required=False делает необязательным поле. Спасибо, Pavel, за ответ!

Ответить

ZhenyaKa
ZhenyaKa

31.01.2022 9:55 #

Как изменить цвет шрифта в режиме просмотра html кода? В данный момент фон белый, а шрифт светло серый и его практически не видно

Ответить

Артём Мальцев
Артём Мальцев автор

04.02.2022 4:49 #

Здесь нужно переопределить цвет шрифта. Здесь можно посмотреть как добавить свои стили в админку https://vivazzi.pro/ru/it/add-style-to-admin-django/ (правда это очень старая и незаконченная статья, но главное, что можно смысл понять, что нужно сделать)

А сам стиль будет, например, такой:

textarea.cke_source {color: #333;}

Ответить

ZhenyaKa
ZhenyaKa

06.02.2022 0:10 #

Я менял этот стиль, но при включении просмотра исходного (html) кода он влияния не оказывает :(

Ответить

Артём Мальцев
Артём Мальцев автор

06.02.2022 12:53 #

А этот стиль вообще загружается? сам файл загружается? И через инструменты разработчика хром можно посмотреть, почему не применяется

Ответить

ZhenyaKa
ZhenyaKa

07.02.2022 10:11 #

у меня сложилось впечатление, что через js как-то меняется фон

Ответить

Артём Мальцев
Артём Мальцев автор

07.02.2022 16:18 #

Может быть и так. Может от версии ckeditor зависит, хотя сомневаюсь

Ответить

Гость
Гость

24.07.2024 12:18 #

Спасибо за хорошее описание. Подскажите, пожалуйста, можно ли как-то в конфиге указать список разрешенных форматов заголовков (h1, p) не используя djangocms-text-ckeditor?

Ответить

Гость
Гость

24.07.2024 12:34 #

Разобрался, указав 'format_tags': 'h1;p'

Ответить

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментирования от своего имени войдите или зарегистрируйтесь на сайте Vuspace

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц