장고) WYSIWYG 에디터 적용방법(django-quill-editor)

하얀설표 | 작성시간 2024.08.02.
#Django

(2024.08.02. 수정됨.)

환경

OS : Windows 10
python : 3.10.11
Django : 5.0.7

주요 파일 경로

mysite/
|- config/
|   |- urls.py
|   |- settings/
|       |- settings.py
|- board/
|   |- models.py
|- templates/
    |- detail.html

읽기 전에

이 글을 보고 따라하는 것이 목적이라면 이전 글을 먼저 읽고 동일한 환경을 갖춘 상태에서 시도하시길 바랍니다.

quill 에디터 사용해보기

https://quilljs.com/playground/snow에서 에디터를 사용해볼 수 있습니다.

django-quill 설치방법

django-quill 설치하기

"pip install django-quill-editor" 명령으로 패키지를 설치할 수 있습니다.

(django) C:\django\mysite>pip install django-quill-editor
Collecting django-quill-editor
  Downloading django_quill_editor-0.1.40-py3-none-any.whl.metadata (4.5 kB)
Requirement already satisfied: django>=3.0 in c:\django\lib\site-packages (from django-quill-editor) (5.0.7)
Requirement already satisfied: asgiref<4,>=3.7.0 in c:\django\lib\site-packages (from django>=3.0->django-quill-editor) (3.8.1)
Requirement already satisfied: sqlparse>=0.3.1 in c:\django\lib\site-packages (from django>=3.0->django-quill-editor) (0.5.1)
Requirement already satisfied: tzdata in c:\django\lib\site-packages (from django>=3.0->django-quill-editor) (2024.1)
Requirement already satisfied: typing-extensions>=4 in c:\django\lib\site-packages (from asgiref<4,>=3.7.0->django>=3.0->django-quill-editor) (4.12.2)
Downloading django_quill_editor-0.1.40-py3-none-any.whl (32 kB)
Installing collected packages: django-quill-editor
Successfully installed django-quill-editor-0.1.40

(django) C:\django\mysite>p

app 추가하기

마이그레이션을 진행하기 위해 settings.py의 INSTALLED_APPS에 "django_quill"를 추가합니다.

# config/settings/settings.py

...
INSTALLED_APPS = [
    'django_quill',
    ...
]
...

모델 변경하기

models.py의 content field를 "QuillField"로 변경합니다.

# board/models.py

from django.conf import settings
from django.db import models
from django.shortcuts import resolve_url

from django_quill.fields import QuillField # 추가


# 게시글 model
class Article(models.Model):
    ...
    # content = models.TextField( # 내용 field
    #     verbose_name='내용',
    #     max_length=9999, # 최대 9999자
    #     blank=False, # 이 값은 반드시 입력되어야 함을 설정
    # )
    content = QuillField( # 내용 field
        verbose_name='내용',
        max_length=9999, # 최대 9999자
        blank=False, # 이 값은 반드시 입력되어야 함을 설정
    )
    ...

마이그레이션

모델이 변경되었기때문에 "python manage.py makemigrations"와 "python manage.py migrate"를 진행합니다.

(django) C:\django\mysite>python manage.py makemigrations
Migrations for 'board':
  board\migrations\0002_alter_article_content.py
    - Alter field content on article

(django) C:\django\mysite>python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, board, contenttypes, django_summernote, member, sessions
Running migrations:
  Applying board.0002_alter_article_content... OK

(django) C:\django\mysite>

기존 데이터 변환하기

quill은 WYSIWYG 에디터지만, html이 아닌 독자적인 데이터 형식을 사용합니다.
에디터를 계속 사용하기 위해서는 "python manage.py convert_to_quill" 명령을 통해 기존에 작성한 데이터를 변환해주어야 합니다.

주의하세요. 데이터 형식이 바뀌기 때문에 작업 전 db를 백업해두는 것을 권장합니다.

# Usage: python manage.py convert_to_quill {app_name} {model_name} {field_name}
(django) C:\django\mysite> python manage.py convert_to_quill board Article content

collectstatic

django-summernote가 가지고 있는 static 파일을 사용하기 위해 "python manage.py collectstatic --settings=config.settings.prod" 명령을 입력합니다.

(django) C:\django\mysite>python manage.py collectstatic --settings=config.settings.prod

You have requested to collect static files at the destination
location as specified in your settings:

    C:\django\mysite\static

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes

193 static files copied to 'C:\django\mysite\static'.

(django) C:\django\mysite>

템플릿 수정하기

"{{ object.content|safe }}"를 "{{ object.content.html|safe }}"으로 변경해줍니다.

# templates/detail.html

<div class="content">
    {# 본문 내용 #}
    {# "|safe" template filter를 적용하면 html을 escape하지 않는다. #}
    {#{{ object.content|safe }}#}    
    {# quill editor로 작성한 내용 표시 #}
    {{ object.content.html|safe }}
</div>

확인해보기

장고프로젝트를 실행한 다음, 글 작성 또는 편집 페이지를 확인하면 quill 에디터가 적용된 것을 확인할 수 있습니다.
에디터 툴바에 이미지 삽입 기능이 존재하지만, 이미지 업로드 관련 코드가 구현되어있지 않기 때문에 사진을 적용하더라도 브라우저 캐시 이미지만 삽입될 뿐, 이미지 파일이 저장되지는 않습니다.

장고 quill 에디터 적용



이 글의 댓글 기능은 일부러 막아놓았습니다. 궁금한 내용이 있다면 게시판을 이용해주세요!

#Django