장고:썸머노트 설치 편집하기 (부분)

=django-summernote 모듈로 설치하는 방법=
이 방법보다 부트스트랩 위에 올리는 방법이 더 괜찮다;;(2022.05기준 반응형으로 넣기 어렵다.) 이 방법은 쓰지 말자.
{| class="wikitable"
|+
!과정
!설명
|-
|<code>pip install django-summernote</code>
|장고에서 사용하는 썸머노트를 설치.
|-
|settings.py의 APP 등록
|<code>'django_summernote',</code> 추가
|-
|settings.py 설정
|이미지 업로드를 위해
<code>MEDIA_URL = '/media/'</code>

<code>MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')</code>

추가
|-
|settings.py 설정
|클릭재킹 방지설정 변경.
'django.middleware.clickjacking.XFrameOptionsMiddleware'라는 미들웨어가 클릭재킹을 방지해주는데, 기본설정이 DENY다.

때문에 아래 옵션을 주어 설정을 변경해준다.<syntaxhighlight lang="python">
#클릭재킹 방지설정 변경
X_FRAME_OPTIONS = 'SAMEORIGIN'
</syntaxhighlight><br />
|-
|urls.py 변경
|루트 urls.py에 다음의 코드를 추가한다.
<code>path('summernote/', include('django_summernote.urls')),</code>
|-
|모델 만들기
|기존에 사용하던 모델이 있다면 굳이 만들 필요는 없겠다.<syntaxhighlight lang="python">
from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=10)
    content = models.TextField()

    def __str__(self):
        return self.title
</syntaxhighlight>
|-
|폼 만들기
|기존에 사용하던 폼이 있다면 내용을 추가해주면 된다.<syntaxhighlight lang="python">
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(),}
</syntaxhighlight>폼까지 완성했으면 기존의 탬플릿이 잘 작동하나 확인해본다.

<nowiki>혹시나 {{</nowiki>
|-
|탬플릿 변경
|<nowiki>썸머노트로 입력한 내용은 html코드로 나온다. 탬플릿 필터 |safe 를 사용하여 detail.html의 콘텐츠 부분을 다음과 같이 수정한다.</nowiki><syntaxhighlight lang="html+django">
<div class="card-text" style="white-space: pre-line;">{{ question.content| safe  }}</div>
</syntaxhighlight>
|}
근데, 이 섬머노트는 반응형이 아니다; 반영할 수 있는 방법이 있을까?

<br />
설명	입력하는 내용	문서에 나오는 결과
기울임꼴	''기울인 글씨''	기울인 글씨
굵게	'''굵은 글씨'''	굵은 글씨
굵은 글씨와 기울인 글씨	'''''굵고 기울인 글씨'''''	*굵고 기울인 글씨*
설명	입력하는 내용	문서에 나오는 결과
각주	Page text.<ref>[https://www.example.org/ Link text], additional text.</ref>	Page text.^[1]
이름이 지정된 각주	Page text.<ref name="test">[https://www.example.org/ Link text]</ref>	Page text.^[2]
같은 각주의 추가 사용	Page text.<ref name="test" />	Page text.^[2]
각주 표시	<references />	↑ Link text, additional text. ↑ Link text