Computer >> 컴퓨터 >  >> 프로그래밍 >> Python

Django에서 Quill 텍스트 편집기 필드 추가하는 방법

많은 온라인 시험 응시 사이트에서는 텍스트 입력, 이미지 업로드 등을 위해 텍스트 편집기(Text Editor)를 활용합니다. 그중에서도 Quill 텍스트 편집기는 가장 널리 사용되는 에디터 중 하나로, 데이터베이스에 직접 저장할 수 있는 모델 필드(Model Field)까지 제공합니다. 따라서 에디터의 데이터를 DB에 저장하기 위해 별도의 복잡한 설정을 할 필요가 없다는 것이 큰 장점입니다.

이번 글에서는 Django 프로젝트에서 Quill 기반 텍스트 편집기 필드를 만들고 활용하는 방법을 단계별로 살펴보겠습니다.

1. 프로젝트 준비

먼저 Django 프로젝트와 앱을 생성합니다. 이후 앱의 urls를 포함시키는 것과 같은 기본 설정을 진행하고, 프로젝트 폴더와 앱 폴더와 같은 위치에 media 폴더를 하나 생성해 둡니다.

settings.py 파일에 다음 내용을 추가합니다.

INSTALLED_APPS = [
    'myapp.apps.MyappConfig',  # django 앱
    'django_quill'             # 모듈 이름
]
...
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

INSTALLED_APPS에 앱과 django_quill 모듈을 등록하고, 업로드된 미디어 파일이 저장될 경로(MEDIA_ROOT)와 접근 URL(MEDIA_URL)을 지정합니다.

2. django_quill 패키지 설치

다음 명령어로 django_quill 패키지를 설치합니다.

pip install django_quill

3. urls.py 설정

앱의 urls.py에 아래 코드를 추가합니다.

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]
urlpatterns += static(settings.MEDIA_URL,
                      document_root=settings.MEDIA_ROOT)

여기서는 메인 페이지(home 뷰)의 URL과 미디어 폴더에 접근할 수 있는 URL을 함께 설정했습니다. 참고로 static과 settings를 사용하려면 파일 상단에 다음 임포트 구문이 필요합니다.

from django.conf import settings
from django.conf.urls.static import static

4. 템플릿 작성 (home.html)

앱 디렉터리 안에 templates 폴더를 생성하고, 그 안에 home.html 파일을 만든 뒤 아래 내용을 작성합니다.

<!DOCTYPE html>
<html>
    <head>
        {{ form.media }}
        {% include 'django_quill/media.html' %}
        <title>
            TUT
        </title>
    </head>
    <body>
        <form role="form" method="POST">
            <legend>Form Title</legend>
            {% csrf_token %}
            {{ form }}
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
</html>

템플릿 상단의 {{ form.media }}와 {% include 'django_quill/media.html' %} 구문은 Quill 에디터가 화면에서 정상적으로 동작하는 데 필요한 CSS·JS 리소스를 불러오는 역할을 합니다. 그리고 본문에서는 백엔드에서 전달받은 폼을 렌더링하여 사용자에게 보여줍니다.

5. views.py 작성

views.py에 다음 코드를 추가합니다.

from django.shortcuts import render
from django import forms
from .models import another_model

class NewForm(forms.ModelForm):
    class Meta:
        model = another_model
        fields = "__all__"

def home(request):
    if request.method == "POST":
        form = NewForm(request.POST)
        if form.is_valid():
            form.save()
    form = NewForm()
    return render(request, 'home.html', {"form": form})

여기서는 모델을 기반으로 한 ModelForm을 생성하고, home 뷰를 통해 이를 렌더링했습니다. POST 요청이 들어오면 폼 데이터의 유효성을 검증한 후 데이터베이스에 저장하도록 처리했습니다.

6. models.py 작성

models.py에 아래 코드를 추가합니다.

from django.db import models
from django_quill.fields import QuillField

class another_model(models.Model):
    name = models.CharField(max_length=200)
    place = models.CharField(max_length=100)
    animal = models.CharField(max_length=100)
    thing = models.CharField(max_length=100)
    content = QuillField(blank=True)

모델을 정의하면서 핵심인 QuillField를 사용해 텍스트 편집기 필드를 만들었습니다. 이 필드에 입력된 서식 있는 텍스트(HTML) 데이터는 별도 변환 과정 없이 그대로 데이터베이스에 저장됩니다.

실행 결과

서버를 실행하고 메인 페이지에 접속하면, 일반 입력 필드들과 함께 Quill 텍스트 편집기가 렌더링된 폼을 확인할 수 있습니다. 텍스트 서식 지정, 이미지 삽입 등의 기능을 사용해 입력한 내용은 제출 시 데이터베이스에 저장됩니다.