WYSIWYG
게시판의 글을 쓸때 가능한한 자기 의도대로 글을 쓸 수 있도록 하는 기능
즉, 보는대로 글이 써진다.
현재 게시글을 작성할떄는 일반적인 텍스트로 이루어져 있는 형태인데, 그것을 좀 더 굵게도 하고, 크게도 하고, 언더라인도 칠 수 있고 등등 글을 풍부하게 작성하는 기능을 제공.

Medium editor
Medium-editor : https://github.com/yabwe/medium-editor

articleapp/forms.py
게시글을 쓸때 이러한 기능들이 제공되어야 하기 떄문에 articleapp 의 forms.py 를 수정한다.

기존의 모델 Form 은 일반적인 field 만 정해주고 따로 설정은 해주지 않았다.
이에 추가적으로 커스터마이징 진행

그전에 먼저 MediumEditor 사용법을 보자

간략히 살펴보면 'editable' 이라는 이름을 가진 MediumEditor 객체 editor 를 생성해주기만 하면 나머지 기능적인 면은 자동으로 구현이 된다.

따라서 attribute 안에다가 우리가 원하는 클래스 정보를 넣어줄때 클래스 이름이 'editable'

이러한 여러 attr 를 구성하는 위젯 textArea form 을 포함한 charfield form 으로 content 필드를 만든다.

from django.forms import ModelForm
from django import forms
from articleapp.models import Article

class ArticleCreationForm(ModelForm):
content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable'}))

class Meta:
    model = Article
    fields = ['title', 'image', 'project', 'content']

templates/articleapp/create.html
오픈소스에 첨부된 링크를 다음 create.html 에 삽입

{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

{% endblock %}
WYSIWYG 적용 결과
결과를 확인해보면 내용 부분에 태그로 감싸져있는 글 형태로만 보임.
그 이유 : content 를 detail 페이지에 그냥 뿌랴줘서 그렇다.

그냥 뿌려주기 :

{{ target_article.content }}

articleapp/detail.html 내부 코드

해결
간단한 safe 필터를 추가한다면 태그들은 벗겨지고 나머지 셋팅된 일반적인 태그들만 나올 수 있게 된다.
div 태그로 감싸면서 왼쪽 정렬 스타일

safe 필터 결과 확인

업데이트를 눌러보게 되면 이런식으로 나온다.
1) 따라서, createview 뿐만 아니라 updateview 도 적용시켜줘야한다.

2) 또한 Project 선택하지 않을 경우에도 게시글을 작성할 수 있도록 수정해줘야 한다.

수정
1)updat.html 에도 Medium-editor 추가
{% extends 'base.html' %}
{% load bootstrap4 %}

{% block content %}

{% endblock %}
2) articleapp/forms.py 에서 project 필드 생성
ModelChoiceField 사용, 인자로는 queryset 사용

from django.forms import ModelForm
from django import forms
from articleapp.models import Article
from projectapp.models import Project

class ArticleCreationForm(ModelForm):

# bootstrap 에 있는 text-left 클래스 사용, 높이 자동 조절
content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable',
                                                       'style': 'height: auto; text-align: left'}))
# 추가                                                            
project = forms.ModelChoiceField(queryset=Project.objects.all())
class Meta:
    model = Article
    fields = ['title', 'image', 'project', 'content']

결과 확인
게시글 업데이트 버튼 클릭시

프로젝트를 선택하지 않아도 게시글 생성 등 가능

commit