제가 가장 많이 사용하는 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' 카테고리의 다른 글

django middleware  (0) 2016.08.15
django-summernote 사용하기  (4) 2016.07.23
get 방식의 글자 256자 제한은 잘못된 상식  (0) 2016.05.24
Django South migration error   (0) 2015.09.30
django ajax post data and view.py  (0) 2014.11.08
uwsgi logger disable option  (0) 2014.10.24

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글  4개가 달렸습니다.
  1. 너무 힘듭니다..... 2017.02.08 02:02 신고
    다 똑같이 따라했는데,
    Got an error uploading an image: <h1>Server Error (500)</h1>
    이런 메세지가 나옵니다...
    media url도 넣었고,
    debug도 false로도 바꿔보고 다 했는데도요....
    원인이 무엇일까요?ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
  2. 이미지 업로드시에 발생한 오류예요.ㅠㅠㅠㅠ
  3. Last, please don't forget to use safe templatetag while displaying in templates.
    {{ foobar|safe }}

    요료코롬 쓰여있잖아요.
    그런데 전 makedown을 뷰에서 사용해서, safe를 지우고 사용하거든요.
    {{ foobar|safe|linebracks }}에서 다빼고, {{foobar}} 만 사용하면,
    html도 되고, markdown도 해서 좋기는 좋은데,
    don't forget to use safe , 이 단어가 뒤끝을 안좋게 만들어요.
    safe 안쓰면 보안에 안좋은지 궁금해요.
    • 방금댓글쓴사람 2017.03.19 08:27 신고
      form 뷰에서 summernote 뷰가 너무 커서 그런데, 뷰 사이즈를 조절 할 수 있는 방법이 있는지 알고싶습니다.
secret