본문 바로가기

web/Django

django-summernote 사용하기

제가 가장 많이 사용하는 WYSIWYG는  summernote와 froala입니다. froala의 경우는 심플하고 깔끔하지만 기능성에 있어서 상당히 버그가 많습니다. 커스텀또한 어려운 편입니다. summernote도 깔끔한데다가 딱히 손볼곳이 없이 군더더기 없이 사용할 수 있는 에디터 입니다.


그런 summernote의 경우엔 django의 app으로도 개발되어 있어서 django로 쉽게 사용이 가능합니다.


이제부터 django-summernote의 설정및 구현 방법입니다.


django-sumernote의 자세한 내용을 원하시면 해당 레파지토리를 활용하세요!

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




아래의 진행사항의 전체 소스는 https://github.com/uiandwe/django_summernote_test 입니다. 



1. 설치하기
 $ pip install django-summernote


2. 기본셋팅


settings.py 의 installed_apps 추가


INSTALLED_APPS = [
.........
'django_summernote',
]


urls.py 의 url경로 등록

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

]


post라는 app을 추가하였습니다.

$python manager.py startapp post



3. 모델 및 폼 생성


post/models.py 에 summernote의 모델을 추가해 줍니다.


from django.db import models
from django_summernote import models as summer_model
from django_summernote import fields as summer_fields
# Create your models here.


class summer_note_model(summer_model.Attachment):
summer_field = summer_fields.SummernoteTextField()

form.py form 추가

post/form.py 파일 추가 후 아래의 소스를 넣어줍니다.

해당 form부분에서 summernote의 속성을 지정해 줄수 있습니다.

__author__ = 'uiandwe'

from django import forms
from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget
from django_summernote import fields as summer_fields
from .models import summer_note_model


class FormFromSomeModel(forms.ModelForm):

fields = summer_fields.SummernoteTextFormField(error_messages={'required':(u'데이터를 입력해주세요'),})
class Meta:
model = summer_note_model
fields = ('fields',)
widgets= {
'foo' : SummernoteWidget(),
'bar' : SummernoteInplaceWidget(),
}

4. view 추가 / urls.py 생성


post/views.py에 post에 대한 컨트롤러 부분을 추가해줍니다.

post 부분에 전송된 데이터가 넘어오게 됩니다. 

form.is_valid() (데이터 검증) 부분을 통과한 부분에 db를 연동해서 저장하는 로직을 넣어주시면 됩니다.

from django.shortcuts import render
from post.form import FormFromSomeModel as DetailForm
# Create your views here.


def posts(request):
if request.method == "GET":
return render(request, 'post/form.html', {'form': DetailForm})
elif request.method == "POST":
form = DetailForm(request.POST)
if form.is_valid():
print(form)
return render(request, 'post/form.html', {'form': DetailForm})


post/urls.py 를 생성해 줍니다.

url경로를 지정해 주었는데 저의 경우 /post/로 지정하였습니다.



from django.conf.urls import patterns, include, url

urlpatterns = patterns('',
url(r'^$', 'post.views.posts'),
)

5. 템플릿 생성 및 설정


templates 폴더 생성

  |____  post 폴더 생성

               |____ form.html 생성


폴더 및 파일을 생성합니다. 

form.html에 form 태그를 넣어줍니다.


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="/post/" method="post">{% csrf_token %}
{{ form|safe }}
<input type="submit" value="Submit" />
</form>
</body>
</html>


settings.py 


위의 설정해준 템플릿 적용을 위해선 경로를 지정해 줘야 합니다. 

settings.py중 templates[]에서 dirs 경로 추가해 줍니다.

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
............... },
]


6. 마이그레이션!

$python manage.py makemigrations

$pip manage.py migrate



7. run!!







마지막으로 파일 업로드를 사용시엔 경로를 설정해 주셔야 합니다.


settings.py 에서 


staticfiles_dirs / media_root / media_url  경로를 설정해 주시면 해당 폴더로 파일이 업로드 됩니다.

STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),

]

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


끝!

'web > Django' 카테고리의 다른 글

ubuntu uwsgi  (0) 2019.01.10
django middleware  (0) 2016.08.15
get 방식의 글자 256자 제한은 잘못된 상식  (3) 2016.05.24
Django South migration error   (0) 2015.09.30
django ajax post data and view.py  (0) 2014.11.08