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 %}
<!--Medium-editor 스크립트 링크 삽입 추가-->
<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<div style="text-align : center; max-width: 500px; margin: 4rem auto;">
<div class="mb-4"> <!-- margin bottom 해서 4배 -->
<h4>Article Create</h4>
</div>
<form action="{% url 'articleapp:create' %}" method="post" enctype="multipart/form-data"> <!--url 일원화, post 방식 으로 전송 -->
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
</form>
</div>
<!--Medium-editor 선언하는 부분 추가-->
<script>var editor = new MediumEditor('.editable');</script>
{% endblock %}WYSIWYG 적용 결과
결과를 확인해보면 내용 부분에 태그로 감싸져있는 글 형태로만 보임.
그 이유 : content 를 detail 페이지에 그냥 뿌랴줘서 그렇다.
- 그냥 뿌려주기 :
<p> {{ target_article.content }} </p>
articleapp/detail.html 내부 코드
해결
간단한 safe 필터를 추가한다면 태그들은 벗겨지고 나머지 셋팅된 일반적인 태그들만 나올 수 있게 된다.
div 태그로 감싸면서 왼쪽 정렬 스타일
safe 필터 결과 확인
업데이트를 눌러보게 되면 이런식으로 나온다.
1) 따라서, createview 뿐만 아니라 updateview 도 적용시켜줘야한다.
2) 또한 Project 선택하지 않을 경우에도 게시글을 작성할 수 있도록 수정해줘야 한다.
수정
1)updat.html 에도 Medium-editor 추가
{% extends 'base.html' %}
{% load bootstrap4 %}
{% block content %}
<!--Medium-editor 커스텀 스크립트 링크 삽입 -->
<script src="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@5.23.2/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<div style="text-align : center; max-width: 500px; margin: 4rem auto;">
<div class="mb-4"> <!-- margin bottom 해서 4배 -->
<h4>Article Update</h4>
</div>
<form action="{% url 'articleapp:update' pk=target_article.pk %}" method="post" enctype="multipart/form-data"> <!--url 일원화, post 방식 으로 전송 -->
{% csrf_token %} <!-- csrf_token 은 항상 들어 가야 하는 것 -->
{% bootstrap_form form %}
<input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
</form>
</div>
<!--Medium-editor 객체 선언 하는 부분 -->
<script>var editor = new MediumEditor('.editable');</script>
{% 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
