Django Admin에서 Summer Note 에디터 사용하기

Summer Note는 Django에서 사용할 수 있는 굉장히 가볍지만 강력한 WISYWIG 에디터입니다.

Summer Note를 사용하기 위해서는 패키지를 설치하고 몇 가지 설정만 해주면 됩니다.

PyCharm의 Project Interpreter 세팅에서 django-summernote를 추가합니다.

CLI를 통해 설치할 경우, 아래의 명령어를 입력합니다.

$ pip3 install django-summernote

이제 settings.py에 Summer Note를 추가합니다.

INSTALLED_APPS = [
    ...
    'django-summernote',
    ...
]

Summer Note에서 제공하는 File Upload를 사용하기 위해서 파일이 저장되는 경로도 설정해주어야 합니다.
settings.py에 MEDIA_ROOT와 MEDIA_URL을 아래와 같이 설정합니다.

MEDIA_ROOT = path.join(path.dirname(__file__), 'media', )
MEDIA_URL = '/media/'

위처럼 설정하면 settings.py가 있는 프로젝트 디렉터리에 있는 media라는 폴더를 Root로 설정하게 됩니다.

MEDIA_URL은 에디터상에서 이미지 주소를 참고할 때 앞에 붙는 주소를 의미합니다.

이 내용들이 정상적으로 반영되기 위해서는 urls.py를 수정해주어야 합니다.

from django.conf.urls import url
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

from summernote import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^summernote/', include('django_summernote.urls'))
]

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

Summer Note가 정상적으로 작동할 수 있게 URL 패턴에 추가합니다.

또한, 앞서 설정한 Media Root와 Media URL이 작동할 수 있도록 해당 내용을 urlpatterns에 추가합니다.

이제 글을 저장할 수 있는 간단한 모델을 만들어봅니다.

그리고 Summer Note를 Admin 페이지에서 사용하여 글을 작성해 볼 것입니다.

$ python3 manage.py startapp example

위의 명령어를 수행해서 새로운 어플리케이션을 만듭니다.

settings.py에 새로 만든 어플리케이션을 추가합니다.

INSTALLED_APPS = [
    ...
    'example',
    ...
]

이제 어플리케이션의 models.py에서 간단한 게시글 모델을 생성합니다.

from django.db import models

# Create your models here.
class Article(models.Model):
    title = models.CharField(max_length=50, default='')
    content = models.TextField(default='')

이제 데이터베이스에 모델을 적용합니다.

$ python3 manage.py makemigrations example

$ python3 manage.py migrate

데이터베이스를 살펴보면 게시글 테이블 뿐만 아니라 다양한 테이블이 존재하는 것을 확인할 수 있습니다.

이는 Django에서 기본적으로 제공해주는 User 모델이며 웹 어플리케이션을 만든다면 이를 활용하는 것이 좋습니다.

Admin 페이지 접근을 위해 Super User를 새롭게 생성합니다.

$ python3 manage.py createsuperuser

이제 Admin 페이지에서 Summer Note 에디터를 사용하기 위한 설정을 수행합니다.

어플리케이션 디렉토리의 admin.py에 아래의 내용을 입력합니다.

from django.contrib import admin

# Register your models here.
from django_summernote.admin import SummernoteModelAdmin

from editor.models import Article


class ArticleAdmin(SummernoteModelAdmin):
    summernote_fields = '__all__'

admin.site.register(Article, ArticleAdmin)

위의 코드는 Django의 Admin에 앞서 생성한 Article 모델을 적용하는 코드입니다.

이때 ArticleAdmin을 Django 기본 Admin이 아닌 SummernoteModelAdmin으로 선언한 것에 주목합니다.

그리고 Django Admin에 생성한 Admin Model을 등록하여 줍니다. Article 모델을 SummernoteModelAdmin으로 관리하겠다는 내용이 됩니다. 이렇게 적용을 하게 되면 Article 모델의 생성, 수정, 삭제를 Summer Note가 적용된 Admin 페이지에서 수행할 수 있게 됩니다.

이제 Django Admin에 접속하기 위해 URL 패턴을 수정하는 일만 남았습니다.

from django.conf.urls import url
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path, include

from summernote import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^summernote/', include('django_summernote.urls'))
]

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

위와 같이 URL 패턴에 Summer Note URL을 포함시켜 줍니다.

또한 URL 패턴에 MEDIA URL과 MEDIA ROOT 설정이 포함되어야 정상적으로 이미지 업로드가 가능하니 주의합니다.

이제 Django 서버를 시작합니다.

$ python3 manage.py runserver 8000

브라우저에 127.0.0.1:8000/admin을 입력하면 Admin 페이지에 접속할 수 있습니다.

아이디와 패스워드를 입력하고 접속하면 아래와 같은 화면이 나옵니다.

아까 Admin 페이지에 등록한 Article 모델을 볼 수 있습니다.

EDITOR라고 적용되어 있는 것도 확인할 수 있습니다.

add를 눌러서 새로운 모델 생성 페이지로 이동합니다.

위와 같이 Summer Note 에디터 화면이 나오는 것을 확인할 수 있습니다.

이미지 업로드는 Toolbar의 이미지 아이콘을 눌러서 삽입하거나 Drag & Drop으로 이미지를 삽입할 수 있습니다.