📌 Django-summernote - WYSIWYG 에디터 통합 가이드

📌 Django-summernote - WYSIWYG 에디터 통합 가이드

---

✨ django-summernote란?

django-summernote는 Django 프로젝트에 WYSIWYG(What You See Is What You Get) 에디터를 간편하게 통합할 수 있게 해주는 라이브러리입니다. 사용자는 HTML을 몰라도 글을 시각적으로 작성할 수 있어 게시판, 블로그, 관리자 에디터 등에 많이 사용됩니다.

---

📌 특징

항목 설명

🌈 직관적인 에디터	이미지 삽입, 글꼴 변경, 링크, 표 등 다양한 기능 제공
📸 이미지 업로드 지원	에디터 내에서 바로 이미지 업로드 가능 (MEDIA 연동 필요)
⚙️ Admin 통합	Django Admin에서 자동 적용 가능
🔗 외부 JS/CSS 의존도 낮음	필요한 라이브러리는 자동으로 포함됨

---

⚙️ 설치 및 세팅

1. 라이브러리 설치

pip install django-summernote

2. settings.py 설정

INSTALLED_APPS = [
    ...
    'django_summernote',
]

X_FRAME_OPTIONS = 'SAMEORIGIN'  # iframe 사용 허용

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

3. urls.py 설정

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include

urlpatterns = [
    path('summernote/', include('django_summernote.urls')),
    ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

---

🧑‍💻 사용법

1️⃣ 모델에서 사용

from django.db import models
from django_summernote.fields import SummernoteTextField

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = SummernoteTextField()

2️⃣ Admin에서 사용

from django.contrib import admin
from django_summernote.admin import SummernoteModelAdmin
from .models import Post

class PostAdmin(SummernoteModelAdmin):
    summernote_fields = ('content',)

admin.site.register(Post, PostAdmin)

---

💡 확장 팁

기능 설명

이미지 업로드 제한	최대 크기 및 확장자 제한 가능 (settings.py에서 설정)
Summernote 위젯	forms.py에서 폼 필드에 위젯으로 직접 지정 가능
CDN 사용	외부 리소스를 로딩하지 않고 자체 호스팅도 가능

---

✅ 정리 요약

항목 설명

django-summernote	Django에 WYSIWYG 에디터를 쉽게 추가하는 패키지
주요 기능	시각적 글쓰기, 이미지 업로드, admin 통합
설치 방식	pip 설치 + settings 및 URL 세팅
적용 방법	모델 필드에 SummernoteTextField 사용

---

django-summernote는 블로그, 게시판, CMS 등에서 빠르게 콘텐츠 입력 기능을 구현할 수 있는 강력한 도구입니다 ✍️