django 31. WYSIWYG 의 소개 및 적용

프로젝트 목표

Medium Editor 를 사용하여 WYSIWYG를 통해 게시글 작성할 수 있도록 만들어본다.

 

WYSIWYG

게시판 기능 중 하나로 What You See Is What You Get(보는 대로 글이 써진다.) 의 약자이다.

텍스트를 변환 할 수 있는 기능을 제공해준다.

 

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

GitHub - yabwe/medium-editor: Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Demo : https://yabwe.github.io/medium-editor/

MediumEditor

 

 

forms.py

from django.forms import ModelForm
from django import forms

from articleapp.models import Article
from projectapp.models import Project


class ArticleCreationForm(ModelForm):
    content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable ',
                                                           'style': 'height:auto;text-align : left'}))

    project = forms.ModelChoiceField(queryset=Project.objects.all(), required=False)

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

• Textarea의 attrs는 미리 class와 style을 지정해줌
• 프로젝트 Update 시 해당 프로젝트에 해당하는 프로젝트가 나오도록 설정
• project 설정 안해도 정상적으로 수정가능하도록 required=False 지정

 

create.html , update.html 

<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">


<script>var editor = new MediumEditor('.editable');</script>

• WYSIWYG 설정 link , script 태그 추가

 

detail.html

        <div style="text-align : left">
            {{ target_article.content | safe }}
        </div>

• safe 를 사용해 update시 태그<> 나오는 것 처리

 

• WYSIWYG를 사용해 content 텍스트 변화 주고, 왼쪽 정렬 설정 페이지

 

• content 지정한 그대로 (what you see) 텍스트로 보여짐(what you get)