django 추가기능 구현 - markdown editor(summernote)

django에 기본적인 글쓰기 기능이 구현되었다면 홈페이지를 좀 더 꾸미기 위해 사람들이 글씨체와 이미지들을 추가하여 게시글을 조금 더 꾸미기 쉽게 할수 있는 editor가 필요하다. 

 

먼저 게시글이 일반 텍스트가 아닌 markdown을 보여줄수 있도록 만들어야한다.

 

순서

 markdown 모듈 설치->tamplatestag 수정-> 글 상세페이지 html 수정-> summernote(markdown editor) 모듈 설치 -> settings.py 수정 -> urls.py 수정 ->  form파일수정 -> html수정

 

1.markdown 모듈 설치

pip install markdown

 

2.tamplatestag 수정(app이름이 blog 일경우) 

경로에 유의해서 만들어줍니다.

blog/templatetags/blog_filter.py 만들기

from django import template
import markdown
from django.utils.safestring import mark_safe

register = template.Library()

@register.filter()
def mark(value):
    extensions = ["nl2br", "fenced_code"]
    return mark_safe(markdown.markdown(value, extensions=extensions))

마크다운에는 몇가지 확장기능이 있는데 nl2br은 줄바꿈 문자를 <br>로 바꾸어주고 fenced_code는 마크다운의 소스코드 표현을 위해 사용됩니다.

nl2br을 사용하지 않을 경우 줄바꿈을 하기 위해서는 줄 끝에 스페이스(' ')를 두개 연속으로 입력해야 한다.

마크다운의 더 많은 확장 기능은 다음 문서를 참고하시면 됩니다.

마크다운 문법 공식 문서: www.markdownguide.org/getting-started
마크다운 확장 기능 문서: https://python-markdown.github.io/extensions/

Extensions — Python-Markdown 3.3.7 documentation

 

 

3.글 상세페이지 html 수정

이제 template에 적용할 준비가 완료되었다.

ex)model 이름이 post일경우

{{ post.content }} -> {{ post.content | mark}} 로 수정해주면 이제 텍스트가 html코드 해석기를 적용하여 보여진다.

 

이제 작성자가 쉽게 html코드로 작성할수 있도록 해주는 markdown editor를 작성폼에 적용시켜봅시다.

 

4.summernote(markdown editor) 모듈 설치

쉽게 적용할수 있고 이용자들도 편하게 이용할 수 있는 summernote 모듈을 사용해 보겠습니다.

django-summernote github 주소 : https://github.com/summernote/django-summernote

pip install django-summernote​

 

5.settings.py 수정

INSTALLED_APPS += ('django_summernote', )

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

미디어 파일들을 저장할 경로를 만들어주고 APP에 summernote를 추가해준다.

 

6. urls.py 수정

from django.urls import include
from django.conf import settings
from django.conf.urls.static import static

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

urlpatterns에 summernote를 추가하고 디버그 옵션을 켜서 개발모드에서 에러를 확인할수 있도록 해줍니다.

운용할때는 꺼놓는걸 추천하고 있습니다.

이제 글작성 페이지를 바꿔봅시다.

 

 

7.forms.py 파일수정

from django_summernote.widgets import SummernoteWidget


class QuestionForm(forms.ModelForm):
    class Meta:
        model = Question  # 사용할 모델
        fields = ['subject', 'content']  # QuestionForm에서 사용할 Question 모델의 속성
        widgets = {
            'content': SummernoteWidget(attrs={'summernote': {'width': '100%', 'height': '400px'}}),
            }

widgets에서 content를 SummernoteWidget을 적용할수 있도록 만들어 줍니다.

위와같이 summernote에 간단한 속성을 바로 적용시켜 커스텀 할 수도 있고 

https://github.com/summernote/django-summernote

GitHub - summernote/django-summernote: Simply integrate Summernote editor with Django project.

이곳의 아래쪽으로 가보면 settings.py를 수정하여 커스텀을 이용할 수 있는 방법이 적혀있습니다.

 

 

8. html수정

이제 html에서 사용하는 방법을 알아보겠습니다.

 

{% extends 'base.html' %}
{% block content %}
					...
        {{form.content}}
        				...
        <button type="submit" class="btn btn-primary">저장하기</button>
    </form>
</div>
{% endblock %}

위와같이 {{form.content}}로 불러오면 바로 적용되는 모습을 볼 수 있다.