장고:썸머노트 설치

장고! 웹 프레임워크! 틀:장고

개요

일반적인 textarea에서 표현할 수 있는 방식은 굉장히 적다. 적어도 위키처럼 목차관리를 해준다든가, 링크를 만든다든가 정도는 되야 하지 않을까. 많이 사용되는 에디터인 섬머노트를 장고에 설치해본다.

이미 장고앱으로 개발되어 있어 쉽게 설치가 가능하다.

django-summernote 모듈로 설치하는 방법

이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;; 이 방법은 쓰지 말자. 아래 참조.


과정	설명
`pip install django-summernote`	장고에서 사용하는 썸머노트를 설치.
settings.py의 APP 등록	`'django_summernote',` 추가
settings.py 설정	이미지 업로드를 위해 `MEDIA_URL = '/media/'` `MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')` 추가
settings.py 설정	클릭재킹 방지설정 변경. 'django.middleware.clickjacking.XFrameOptionsMiddleware'라는 미들웨어가 클릭재킹을 방지해주는데, 기본설정이 DENY다. 때문에 아래 옵션을 주어 설정을 변경해준다. #클릭재킹 방지설정 변경 X_FRAME_OPTIONS = 'SAMEORIGIN'
urls.py 변경	루트 urls.py에 다음의 코드를 추가한다. `path('summernote/', include('django_summernote.urls')),`
모델 만들기	기존에 사용하던 모델이 있다면 굳이 만들 필요는 없겠다. from django.db import models class Post(models.Model): title = models.CharField(max_length=10) content = models.TextField() def __str__(self): return self.title
폼 만들기	기존에 사용하던 폼이 있다면 내용을 추가해주면 된다. from django import forms from .models import Post from django_summernote.widgets import SummernoteWidget class PostForm(forms.ModelForm): class Meta: model = Post fields = ['title', 'content'] widgets = {'content': SummernoteWidget(),} 폼까지 완성했으면 기존의 탬플릿이 잘 작동하나 확인해본다. 혹시나 {{
탬플릿 변경	썸머노트로 입력한 내용은 html코드로 나온다. 탬플릿 필터 \|safe 를 사용하여 detail.html의 콘텐츠 부분을 다음과 같이 수정한다. <div class="card-text" style="white-space: pre-line;">{{ question.content\| safe }}</div>

근데, 이 섬머노트는 반응형이 아니다; 반영할 수 있는 방법이 있을까?

부트스트랩 위에 올리기

썸머노트 공식페이지에 설명되어 있다. https://summernote.org/getting-started/#for-bootstrap-4

역시, 공식사이트가 가장 적절하다.

글쓰기 환경에서만 작동하면 되니, 예시코드를 해석해 create.html 등에 두면 된다.

어려운 사람은 다음을 참고하자. 다음 코드가 <head>태그 안에 들어가게 하고..

    <meta charset="UTF-8">
    <title>Summernote with Bootstrap 4</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-bs4.min.js"></script>

다음을 적절한 장소에 기입하면 썸머노트 에디터를 볼 수 있다.

<div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: '여기에 내용 입력하세요~',
        tabsize: 2,
        height: 100
      });
    </script>

간단하게 넣을 수 있고, 반응형이다. 다만, 몇몇 tool이 안보인다.(가장 라이트한 형태로 보여진다. 기능이 없는 것은 아닌데, 툴바에 안보일 뿐.)

툴바를 어떻게 구성할지는 https://summernote.org/deep-dive/#initialization-options 에서 안내한다.

툴들을 묶는 이름은 style 등으로 제시하는데, 임의로 둘 수 있다.

영어긴 하지만 끝까지 읽어보면 기능이 정말 많다; 솔직히 좀 놀람;;;

장고:썸머노트 설치

개요

django-summernote 모듈로 설치하는 방법

부트스트랩 위에 올리기

둘러보기 메뉴

검색