23-04-14 TIL 일지 : Django에서 summernote 사용하기

Today I Learned

---

어떤 문제가 있었는지

장고 프로젝트에서 <textarea>대신에 summernote를 써서 코드블록을 쓰고 싶었음

 

---

내가 시도해 본 것들 + 어떻게 해결 했는지

## console
pip install django-summernote

먼저 장고에서 지원하는 summernote 패키지를 설치

 

## main/settings.py
INSTALLED_APPS = [
    ...
    'django_summernote',
]

STATIC_URL = '/static/'

# Summernote를 위한 설정
# bs3이 코드블록이 젤 잘보였다
SUMMERNOTE_THEME = 'bs3'

settings.py에서 summernote를 인스톨했음을 장고에게 알려줌

 

## main/urls.py
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django_summernote import urls as summernote_urls

urlpatterns = [
    path('summernote/', include('django_summernote.urls')),
]

# Summernote를 사용하기 위한 URL 패턴 추가
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urls.py에 summernote의 경로를 추가해주고 static 경로 지정

 

## app/forms.py
class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'post', 'photo', 'tags',]
        widgets = {
        'title': forms.TextInput(attrs={'class': 'form-control mt-2'}),
        'post': SummernoteWidget(attrs={'summernote': {'width': '100%', 'height': '400px'}}),
        'photo': forms.ClearableFileInput(attrs={'class': 'form-control mt-2'}),
        'tags' : forms.TextInput(attrs={'class': 'form-control mt-2', 'placeholder': '콤마(,)로 구분해주세요'}),
        }
        labels = {
            'title': '제목',
            'post': '내용',
            'photo': '사진',
            'tags': '태그',
        }

forms.py에 textarea대신 SummernoteWidget을 사용

 

 

{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container">
    <h5 class="my-3 border-bottom pb-2">글 작성하기</h5>
    <form method="POST" class="post-form my-3" action="{% if update %}{% url 'post:post_update' post_id=post.id %}{% else %}{% url 'post:post_create' %}{% endif %}" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.media }}
        {{ form.as_p }}

        <div style="text-align: center">
            <button type="submit" class="button large next">{% if update %}수정{% else %}글 쓰기{% endif %}</button>
            <a href="{% url 'user:index' %}" class="button large next">취소</a>
        </div>
    </form>
</div>
<link href="{% static 'django_summernote/summernote-bs4.css' %}" rel="stylesheet">
<script src="{% static 'django_summernote/summernote-bs4.min.js' %}"></script>
<script>
    $(function() {
        $('#id_content').summernote();
    });
</script>

{% endblock %}

마지막으로 html에 form을 불러오면

 

이런식으로 summernote 편집기를 사용할 수 있다

---

무엇을 새롭게 배웠는지

장고에서 summernote 편집기를 쓰는 방법