Закрыть

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

Цитата дня

Vivazzi.ru

Личный сайт Мальцева Артема

Если человек стремится к чему-то всем своим сердцем, он обязательно сумеет добиться того, чего хочет, даже если это кажется невозможным, даже если все окружающие открыто заявляют ему, что это невозможно.

Чак Норрис

Оптимальная конфигурация 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,2 из 5 (всего 5 оценок)

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

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

Автор статьи

Права на использование данной статьи, расположенной на настоящей странице http://vivazzi.ru/it/ckeditor-config/:

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

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

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

Вам нужно саморазвиваться или вы хотите зарабатывать деньги?

Или вы ищите хорошие IT сервисы или книги? Сохраните свое время и взгляните на мою подборку рекомендаций, которыми постоянно пользуюсь.
Посмотреть рекомендации

Комментариев: 2

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

24.02.2018 1:58 #

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

Ответить

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

25.02.2018 21: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).

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

<form method="post" data-action="{% url 'add_comment' %}" data-page_id="{{ request.current_page.id }}" class="comment_form">
    {% 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 %}
            <div class="item_row{% if item.field.required %} required{% endif %}">
                <div class="label_wr"><label for="id_{{ item.name }}{% if item.name == 'captcha' %}_1{% endif %}">{{ item.label }}</label></div>
                <div class="input_wr">
                    <div class="input">{{ item }}</div>
                    <div class="error" id="err_{{ form.prefix }}-{{ item.name }}">{{ item.errors }}</div>
                </div>
            </div>
        {% endif %}
    {% endfor %}

    <div class="submit btn">{% trans 'Send' %}</div>
</form>

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

Ответить

Вы можете оставить комментарий как незарегистрированный пользователь. Но, зарегистрировавшись, вы сможете получать оповещения об ответах, а также иметь доступ к своему личному аккаунту для просмотра своих комментариев.

Чтобы оставить комментарий от своего имени войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

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

Попробуйте