환경
OS : Windows 10
python : 3.10.11
Django : 5.0.7주요 파일 경로
mysite/
|- config/
| |- urls.py
| |- settings/
| |- settings.py
| |- summernote.py
| |- local.py
|- static/
| |- style.css
|- board/
|- views.py읽기 전에
이 글을 보고 따라하는 것이 목적이라면 이전 글을 먼저 읽고 동일한 환경을 갖춘 상태에서 시도하시길 바랍니다.
한국인이 개발한 WYSIWYG 에디터
summernote editor 공식 홈페이지에서 개발팀 소개 페이지를 확인할 수 있습니다.
이 곳에서 팀원들의 SNS 계정을 확인할 수 있는데, 팀원 대부분이 한국인인 것으로 보입니다.
summernote 에디터 사용해보기
https://summernote.org/에서 에디터를 사용해볼 수 있습니다.
django-summernote 설치방법
django-summernote 설치하기
"pip install django-summernote" 명령으로 패키지를 설치할 수 있습니다.
(django) C:\django\mysite>pip install django-summernote
Collecting django-summernote
Using cached django_summernote-0.8.20.0-py3-none-any.whl
Requirement already satisfied: django in c:\django\lib\site-packages (from django-summernote) (5.0.7)
Collecting bleach (from django-summernote)
Using cached bleach-6.1.0-py3-none-any.whl.metadata (30 kB)
Collecting six>=1.9.0 (from bleach->django-summernote)
Using cached six-1.16.0-py2.py3-none-any.whl.metadata (1.8 kB)
Collecting webencodings (from bleach->django-summernote)
Using cached webencodings-0.5.1-py2.py3-none-any.whl.metadata (2.1 kB)
Requirement already satisfied: asgiref<4,>=3.7.0 in c:\django\lib\site-packages (from django->django-summernote) (3.8.1)
Requirement already satisfied: sqlparse>=0.3.1 in c:\django\lib\site-packages (from django->django-summernote) (0.5.1)
Requirement already satisfied: tzdata in c:\django\lib\site-packages (from django->django-summernote) (2024.1)
Requirement already satisfied: typing-extensions>=4 in c:\django\lib\site-packages (from asgiref<4,>=3.7.0->django->django-summernote) (4.12.2)
Using cached bleach-6.1.0-py3-none-any.whl (162 kB)
Using cached six-1.16.0-py2.py3-none-any.whl (11 kB)
Using cached webencodings-0.5.1-py2.py3-none-any.whl (11 kB)
Installing collected packages: webencodings, six, bleach, django-summernote
Successfully installed bleach-6.1.0 django-summernote-0.8.20.0 six-1.16.0 webencodings-0.5.1
(django) C:\django\mysite>
app 추가하기
마이그레이션을 진행하기 위해 settings.py의 INSTALLED_APPS에 "django_summernote"를 추가합니다.
# config/settings/settings.py
...
INSTALLED_APPS = [
'django_summernote',
...
]
...마이그레이션
"python manage.py makemigrations"와 "python manage.py migrate"를 진행합니다.
makemigrations에서 생성되는 마이그레이션이 "0003"으로 시작하는 이유는 django summernote package가 기본적으로 "0001"과 "0002" 마이그레이션을 가지고 있기 때문입니다.
(django) C:\django\mysite>python manage.py makemigrations
Migrations for 'django_summernote':
C:\django\lib\site-packages\django_summernote\migrations\0003_alter_attachment_id.py
- Alter field id on attachment
(django) C:\django\mysite>python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, board, contenttypes, django_summernote, member, sessions
Running migrations:
Applying django_summernote.0003_alter_attachment_id... OK
(django) C:\django\mysite>마이그레이션을 하는 이유
summernote 에디터는 단순한 WYSIWYG 에디터일 뿐인데 db에 별도의 테이블을 생성합니다.
이 테이블은 이미지 파일의 업로드에 사용되며, 이미지가 업로드될 때마다 테이블에 업로드한 파일 정보를 추가합니다.
collectstatic
django-summernote가 가지고 있는 static 파일을 사용하기 위해 "python manage.py collectstatic --settings=config.settings.prod" 명령을 입력합니다.
(django) C:\django\mysite>python manage.py collectstatic --settings=config.settings.prod
You have requested to collect static files at the destination
location as specified in your settings:
C:\django\mysite\static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
193 static files copied to 'C:\django\mysite\static'.
(django) C:\django\mysite>url 추가하기
config 폴더에 있는 urls.py의 "urlpatterns" 제일 상단에 summernote url을 추가합니다.
# config/urls.py
from django.conf import settings
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('summernote/', include('django_summernote.urls')), # summernote editor를 사용하기 위한 url
...
]
if settings.DEBUG:
...style.css 변경하기
style.css에 summernote editor에 적용하기 위한 css를 추가해줍니다.
# static/style.css
...
.note-editor { /* summernote editor용 css */
position: relative !important;
font-size: 17px;
}
...
main, note-editor { /* summernote editor용 css */
min-height: 60vh;
}
...settings 추가하기
cofig/settings 폴더에 summernote.py라는 이름으로 summernote editor용 설정 파일을 생성하고 다음 내용을 저장합니다.
# config/settings/summernote.py
# code by 하얀설표(https://django.seolpyo.com/)
SUMMERNOTE_CONFIG = { # django-summernote에 적용되는 설정
'iframe': True,
'summernote': {
'width': '100%', # 기본 너비
'height': '600', # 기본 높이
'lang': 'ko-KR', # 기본 언어
},
'css': (
'/static/style.css', # 사용자 정의 css 추가
),
}setting 적용하기
local.py를 열고, summernote.py를 import해줍니다.
# config/setting/local.py
from .settings import *
from .summernote import * # 추가views.py 수정하기
이전에 작성한 board app의 views.py를 수정합니다.
summernote editor 적용을 위한 form_article을 작성하고, Post class와 Edit class의 form_class로 선언하면 됩니다.
# board/views.py
# code by 하얀설표(https://django.seolpyo.com/)
from django.db.models import Count
from django import forms # 추가
from django.shortcuts import get_object_or_404, redirect, resolve_url
from django.views.generic import ListView, CreateView, UpdateView, DeleteView, DetailView
from django_summernote.widgets import SummernoteWidget # 추가
from .models import Article, Comment
form_article = forms.modelform_factory( # 글 작성과 편집에 사용하는 form
Article, # form에 사용되는 model
forms.ModelForm, # 기본 form
fields='__all__', # form에서 편집 가능한 필드 목록
widgets={'content': SummernoteWidget()} # content field에 summernote editor 적용
)
class PostMixin:
...
class EditMixin:
...
class DeleteMixin:
...
class List(ListView):
...
class Post(PostMixin, CreateView):
"글 작성 페이지 요청에 사용되는 작업"
fields = None # 에러 방지를 위해 None
form_class = form_article # 글 작성시 form_article을 사용하도록 설정
class Edit(EditMixin, UpdateView):
"글 수정 페이지 요청에 사용되는 작업"
fields = None
form_class = form_article # 글 편집시 form_article을 사용하도록 설정
...확인해보기
장고프로젝트를 실행한 다음, 글 작성 또는 편집 페이지를 확인하면 summernote 에디터가 적용된 것을 확인할 수 있습니다.
config/settings/summernote.py에서 사용자 정의 css 파일을 추가했기 때문에 개별 글 페이지와 비슷한 형식으로 글을 편집할 수 있습니다.
이 글의 댓글 기능은 일부러 막아놓았습니다. 궁금한 내용이 있다면 게시판을 이용해주세요!