Chapter 7-2 Django 블로그 글 작성/수정 폼에 Summernote 적용하기

2025. 5. 11. 22:13·Django
목차
  1. ✅ 1. forms.py 에 Summernote 폼 적용
  2. 🔍 설명:
  3. 🌐 2. CBV에 폼 적용 (Create / Update View)
  4. 🔍 설명:
  5. ⚙️ 3. settings.py 설정 - Summernote 옵션 👉
  6. 🔍 설명:
  7. ✅ 요약

🌟 Django 블로그 글 작성/수정 폼에 Summernote 적용하기


✅ 1. forms.py 에 Summernote 폼 적용

# forms.py

from django import forms
from django_summernote.widgets import SummernoteWidget

from blog.models import Blog, Comment

class BlogForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ('category', 'title', 'content')  # 작성에 필요한 필드
        widgets = {
            'content': SummernoteWidget()  # ✅ content 필드를 Summernote 위젯으로 적용
        }

🔍 설명:

  • SummernoteWidget() 을 content 필드에 적용해 HTML 실시간 편집 기능 제공
  • 이는 Django Form에서 content를 등록할 때 자동으로 Summernote 에디터 활성화

🌐 2. CBV에 폼 적용 (Create / Update View)

# cb_views.py

from django.http import HttpResponseRedirect
from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import CreateView, UpdateView
from .models import Blog
from .forms import BlogForm  # 폼 위젯을 가진 클래스

class BlogCreateView(LoginRequiredMixin, CreateView):
    model = Blog
    template_name = 'blog_form.html'
    form_class = BlogForm  # ✅ Summernote 적용 폼 사용

    def form_valid(self, form):
        self.object = form.save(commit=False)
        self.object.author = self.request.user  # POST에서 로그인 사용자를 작성자로 추가
        self.object.save()
        return HttpResponseRedirect(self.get_success_url())  # 성공시 리다이렉트

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['sub_title'] = '작성'
        context['btn_name'] = '생성'
        return context

class BlogUpdateView(LoginRequiredMixin, UpdateView):
    model = Blog
    template_name = 'blog_form.html'
    form_class = BlogForm  # ✅ 동일한 폼 적용

    def get_queryset(self):
        queryset = super().get_queryset()
        if self.request.user.is_superuser:
            return queryset
        return queryset.filter(author=self.request.user)  # 본인 글만 수정 가능

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['sub_title'] = '수정'
        context['btn_name'] = '수정'
        return context

🔍 설명:

  • form_class = BlogForm
    • 블로그 생성 및 수정 뷰에서 동일한 Form을 사용해 일관된 UI 제공
  • form_valid()에서 작성자를 수동으로 지정해 저장
  • get_context_data()를 통해 템플릿에 동적 제목/버튼 텍스트 추가 가능

⚙️ 3. settings.py 설정 - Summernote 옵션 👉

https://github.com/summernote/django-summernote

# settings.py 마지막에 추가

SUMMERNOTE_CONFIG = {
    'iframe': False,  # iframe 모드 비활성화 (Bootstrap, jQuery 직접 사용하는 경우)

    'summernote': {
        'airMode': False,  # 일반적인 toolbar 모드 사용
        'width': '100%',
        'height': '480',  # 작성 화면 크기

        'toolbar': [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'help']],
        ],

        'lang': 'ko-KR',  # 에디터 언어 설정

        'codemirror': {
            'mode': 'htmlmixed',  # HTML/CSS/JS 혼합 모드
            'lineNumbers': 'true',
            'theme': 'monokai',
        },
    },

    'attachment_require_authentication': True,  # 이미지 업로드 시 로그인 필요
    'disable_attachment': False,               # 첨부 기능 사용
    'attachment_absolute_uri': True,           # 전체 URL 사용 (STATIC_ROOT 기준)
}

🔍 설명:

  • toolbar 설정을 통해 사용 가능한 기능을 제한하거나 확장 가능
  • iframe = False 는 Bootstrap, jQuery가 이미 있는 페이지에서 더 자연스럽게 동작
  • airMode를 True로 설정하면 상단 toolbar 없이 inline 모드 제공
  • lang을 통해 에디터 언어 지정 (기본은 영어)

✅ 요약

항목 설명

forms.py BlogForm에 Summernote 적용 (content 필드)
views.py BlogCreateView / UpdateView에 BlogForm 지정
settings.py 에디터 툴바, 사이즈, 언어, 첨부 옵션 구성

원하신다면 사용자 템플릿에서 Summernote가 잘 렌더링되는지 확인하는 방법도 추가로 설명드릴 수 있어요.
필요하신가요?

'Django' 카테고리의 다른 글

Chapter 7-4 Django 블로그 구성에 이미지 업로드 기능 추가하기  (0) 2025.05.11
Chapter 7-3 Django Summernote iframe 메시 구성와 'codeview' 설정의 의의  (0) 2025.05.11
Chapter 7-1 Django 블로그 이미지 업로드 기능 만들기  (0) 2025.05.11
Chapter 6-5 댓글 페이지네이션 구현하기 (ListView + Bootstrap)  (0) 2025.05.09
Chapter 6-4 Django 블로그에 댓글 기능 추가하기  (0) 2025.05.09
  1. ✅ 1. forms.py 에 Summernote 폼 적용
  2. 🔍 설명:
  3. 🌐 2. CBV에 폼 적용 (Create / Update View)
  4. 🔍 설명:
  5. ⚙️ 3. settings.py 설정 - Summernote 옵션 👉
  6. 🔍 설명:
  7. ✅ 요약
'Django' 카테고리의 다른 글
  • Chapter 7-4 Django 블로그 구성에 이미지 업로드 기능 추가하기
  • Chapter 7-3 Django Summernote iframe 메시 구성와 'codeview' 설정의 의의
  • Chapter 7-1 Django 블로그 이미지 업로드 기능 만들기
  • Chapter 6-5 댓글 페이지네이션 구현하기 (ListView + Bootstrap)
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (802)
      • Python (32)
      • 프로젝트 (115)
      • 과제 (25)
      • Database (40)
      • 멘토링 (11)
      • 특강 (37)
      • 기술블로그 (41)
      • 기술블로그-Fastapi편 (33)
      • 기술블로그-Django편 (154)
      • 기술블로그-Flask편 (36)
      • AI 분석 (5)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (77)
      • Fastapi (16)
      • 연예 (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    life reflection
    trumpmuskclash
    americanlaw
    newpoliticalparty
    titaniumcase
    bts
    hotcoffeecase
    basalcellcarcinoma
    classaction
    urbantrends
    btsreunion
    americaparty
    lawsuitculture
    travel ban
    gpterror
    chinanightlife
    self-growth
    RM
    smartphonedurability
    chatgpterror
    remittance
    youngprofessionals
    college reunions
    homebartrend
    뷔
    livebroadcast
    btsdischarge
    global politics
    btsjungkook
    btscomeback
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
Chapter 7-2 Django 블로그 글 작성/수정 폼에 Summernote 적용하기

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.