Python / Django - Настройка Django Summernote

Настройка Django Summernote

В этой статье я расскажу, как делал одну очень интересную настройку визуального редактора Django Summernote. Сам процесс установки я объяснять не буду т.к. он очень прост и хорошо описан в репозитории этой батарейки.
Сам редактор находится здесь, советую его испозовать т.к. он прост и давльно гибкий в плане настройки.

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

Подключаем summernote в форму в моем случае это форма для добавления комментария. В фале forms.py делаем импорт виджета из библиотеки суммернота SummernoteWidget. В форме в классе Meta создаем словарь widgets и в него добавляем наше текстовое поле text которое мы определили в моем случае в модели Comment.

from django_summernote.widgets import SummernoteWidget

class CommentForm(forms.ModelForm):
    '''Форма комментариев к статьям'''
    class Meta:
        model = Comment
        fields = ['text']
        widgets = {
            'text': SummernoteWidget(),
}

Все теперь наша форма для добавления комментария пользователем будет иметь вид визуального редактора.

Но тут вставет вопрос, как ограничить функционал редактора для пользователя? Для пользователя в моем случае совсем не обязательно видеть кнопку вставки ссылки или добавления картинки и т.д. это нужно как то скрыть т.е. убрать что пользователь был ограничен только тем что мы ему разрешим а иначе заспамят все комменты.)))

Как сделать ограничение функционала визуального редактора django-summernote? Тут все просто, заходим на сайт визуального редактора и смотрим настройки toolbar. Как видим у нас есть массив toolbar в котором собственно и есть уже ограниченный функционал кнопок, его я и применил в своем проекте.

Применить это можно на сайте двумя способами. 1. это общий для всего проекта т.е. если у вас есть формы в разных приложениях к примеру в shop, comments и т.д то в файле settings.py нужно скофигурировать настройки редактора так.

SUMMERNOTE_CONFIG = {
    'iframe': True,
    'summernote': {
        # As an example, using Summernote Air-mode
        'airMode': False,
        'width': '90%',
        'height': '300',
        'toolbar': [
            ['style', ['bold', 'italic', 'underline', 'clear']],
             ['font', ['strikethrough', 'superscript', 'subscript']],
             ['fontsize', ['fontsize']],
             ['color', ['color']],
             ['para', ['ul', 'ol', 'paragraph']],
             ['height', ['height']],
        ]


    },
    'disable_attachment': True,
}

Описывать подробно здесь не буду, думаю тут и так все понятно. Форма приобретет размер указанный нами и урезанный функционал. И это все будет применено ко всем вашим формам на сайте и в административной части в том числе.

И есть второй вариант, когда как в моем случае мне нужно было сделать только на сайте и только в одном приложении и в одной форме данного приложения ограничить функционал и изменить размер редактора. Я сделал это так.

Применил эти настройки но только уже в нужной мне форме. В файле forms.py я сделал так.

class CommentForm(forms.ModelForm):
    '''Форма комментариев к статьям'''
    class Meta:
        model = Comment
        fields = ['text']
        widgets = {
            'text': SummernoteWidget(attrs={
                'summernote': {
                    'airMode': False,
                    'width': '90%',
                    'height': '300',
                    'toolbar': [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['strikethrough', 'superscript', 'subscript']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['misc', ['codeview']],
                    ],

                },

            }),

        }

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

Все вроде хорошо и здорово получилось, но есть один досадный ньюанс который испортил мне все настроение и онял кучу времени на его решение. По умолчанию редактор проставляет автоматом в коде теги <p><br></p>, если нажать в редакторе на кнопку </> просмотр кода то там эти теги буду даже если поле формы пустое.

По этому текст который публиковался на сайте был с этими тегами. Проблема не сложная и решается в 1сек. в шаблоне нужно применить к переменной, которая выводит форму шаблонный фильтр safe {{ com.text|safe}} и он убирает эту проблему. Но эта же проблема есть и в админке точно также если вы будете выводить как я текст комментария в админской части, то эта проблема останется!

Видете, какой кабздец получается в админской части и тут уже такой номер с фильтром safe не прокатит! Но я эту проблему решил и поделюсь с вами безвозмездно этим решением)))

Как это решить с помощью настроект summernote я не разобрался, если есть кто это сделал просьба написать в комментарии к статье.

Я сделал метод tet_format в моем классе CommentAdmin, который решал эту проблему.

from django.utils.safestring import mark_safe

def text_format(self, obj):
	'''Метод, который убирает в админке в поле text теги <p><br></p>'''
	return mark_safe(obj.text)
text_format.short_description = 'Комментарии'

В файле admin.py в классе где вы будете выводить комментарии у меня это класс CommentAdmin в list_display = ['text'] нужно заменить text на имя функции т.е. метода text_format и тогда все теги которые были в админке от суммернота прекратят свое существование)))

На этом все, думаю это будет всем полезно знать, кто столкнется с такой проблемой или уже столкнулся но не смог решить.