제가 가장 많이 사용하는 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 |
