장고 - WYSIWIG 적용 방법

WYSIWIG란?

  • What You See Is What You Get의 약어
  • 웹 브라우저에서 사용할 수 있는 HTML 편집기
  • 일반적으로 웹에서 긴 내용의 텍스트를 입력받을 때는 textareat태그를 사용하나,
  • 블로그, 게시판 등에서는 주로 HTML을 사용한 편집기를 사용한다.
  • ckeditor, tinymce 등 JS를 이용한 플러그인 사용

WYSIWIG 적용 순서

1. django-ckeditor 모듈 다운받아 설치

$ pip install django-ckeditor

2. INSTALLED_APPS에 ckeditor 추가

- 경로 : 프로젝트 > settings.py

1
2
3
4
INTALLED_APPS = [
    ...
    'ckeditor',
]

3. 모델에 RichTextField 추가

- 경로 : 앱 > models.py

1
2
3
4
from django.db import models
from ckeditor.fields import RichTextField
class Post(models.Model):
    content = RichTextField()

4. 모델 변경사항 있으므로, 마이그레이션 진행

$ python manage.py makemigrations [앱이름]
$ python manage.py migrate [앱이름]

5. 관리자페이지에서 해당 필드가 에디터 형태로 나타나는지 확인

6. 프론트 페이지에서도 에디터를 나타나게 하도록 적절한 뷰 만들고 폼 출력

- 경로 : 앱 > templates > 앱 > html 파일
- 폼 출력할 때 필수로 {{form.media}} 사용
- 관리자 개발도구에서 폼 안쪽 추가된 스크립트 확인 가능

1
2
3
4
5
6
<form action="" method="post">
    {% csrf_token %}
    {{form.media}}
    {{form.as_p}}
    <input type="submit" value="Write">
</form>

7. (선택) 추후 S3 연동하기 위한 설정 필요

- 경로 : 프로젝트 > settings.py
    AWS_QUERYSTRING_AUTH = False
Posted  
tags:
  • { Django }
  • { CKEditor }
  • { WYSIWIG }