[python-django]summernote 설치 방법(이미지 업로드까지) - 1부

 

게시판에 넣을 에디터를 찾아보다가 summernote를 사용하기로 하였다.

 

이유는 다음과 같다

 

1. 설치가 쉬워서

2. ckeditor나 smarteditor2.0 버전을 주로 썼는데 새로운거 써보고 싶어서

 

 

너무나 쉬운 설치 방법이 있길래 이걸로 택했다!!!

 

 

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

일단 공식 홈페이지에 들어가서 Getting started메뉴로 들어간다.

그리고 Integrations에서 Django쪽을 보면 django-summernote가 있다! 해당 링크는 아래와 같다.

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

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

git주소에 들어가게 되는데 README.md에 보면 설치방법이 자세히 나와있지만....한글이 편하니 여기에 추가로 작성!!

 

*settings.py는 /config/settings.py를 뜻한다.

 

1. pip로 summernote설치

pip install django-summernote

 

2. settings.py 파일의 INSTALLED_APPS에 django_summernote추가 

3. urls.py에 summernote url설정(/config/urls.py에 아래 내용 그대로 붙여넣으면 된다.)

from django.urls import include

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

 

4. MEDIA_URL 설정(첨부 파일에 대한 처리)
 - settings.py파일에 아래 내용을 넣을것

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

 - DEBUG모드일 경우(일반적인 개발모드일 경우)에는 settings.py에 아래처럼 import를 추가하고, 코드를 더 넣어야한다. 그런데 코드를 보면 DEBUG일떄만 동작하므로 그냥 넣어두고 쓰면 될듯 하다.

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

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

 

4. DB생성 및 처리

python manage.py makemigrations
python manage.py migrate

 

여기까지 했으면 거의 끝났다고 보면된다. 이제 form에서 Summernote를 불러오면 된다.

 

5. form처리

git에 예시가 있는데 일반 forms를 사용할 경우, ModelForm을 사용할 경우로 나뉘어져있다.

 - forms

from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget

# Apply summernote to specific fields.
class SomeForm(forms.Form):
    foo = forms.CharField(widget=SummernoteWidget())  # instead of forms.Textarea

# If you don't like <iframe>, then use inplace widget
# Or if you're using django-crispy-forms, please use this.
class AnotherForm(forms.Form):
    bar = forms.CharField(widget=SummernoteInplaceWidget())

- ModelForm

class FormFromSomeModel(forms.ModelForm):
    class Meta:
        model = SomeModel
        widgets = {
            'foo': SummernoteWidget(),
            'bar': SummernoteInplaceWidget(),
        }

필자의 경우 아직  ModelForm을 사용해서 다음과 같이 넣었는데 참고하면 될듯 하다.

(SummernoteWidget, SummernoteInplaceWidget이 왜 빨간줄인지는 모르겠다.... 아시는분 답글 부탁 드려요...)

 

 

 

 

6. template에서 처리(화면에 보이는 값)

 - summernote에서 글을 작성한 결과의 표기가 html tag가 포함된 형태로 나타날 것이다. 그것을 변경시키기 위해서는 template의 filter 기능을 쓰면된다. 아래와 같이 |safe만 붙이면 해결!

{{ foobar|safe }}

 

이렇게까지 되면 이제 글작성, 이미지 업로드까지 기본적인 게시판 기능이 동작할 것이다.

 

그냥 설치하고 설정값들만 추가해주고 끝이났다!

 

이 외에 git에 보면은 에디터의 사이즈 조절도 가능하고 업로드 기능에 대해서 커스텀도 가능한듯 보인다!