WYSIWYG

WYSIWYG?

What You See Is What You Get의 약자인 WYSIWYG는 보는대로 글이 써진다는 뜻으로 좀 더 글을 쓸 때 풍부함을 더해주는 기능이다.

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

사용법
1. forms에서 사용할 editable 클래스를 위해 create.html에 다음 코드를 작성한다.

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

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

2. forms의 content 필드에 editable 클래스를 적용시킨다.

    content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable text-start',
                                                           'style': 'heigth: auto;'}))

게시글을 작성할 때 적용시킬 것이므로 articleapp/forms의 content 필드에 추가한다.

적용 후 게시글을 작성하면 detail 페이지에서 마크다운이 그대로 노출된다. articleapp/detail.html에서 content를 노출시키는 코드에 safe 필터를 걸어준다.

safe 필터는 태그와 같은 마크다운을 없애주고 내용만 보여준다.

            <div class="text-start">
                {{ target_article.content | safe  }}
            </div>

마찬가지로 update 시에도 똑같이 적용될 수 있도록 수정한다.

articleapp/update.html에 다음 코드 추가

<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">

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

게시글 작성 시 프로젝트를 설정하지 않아도 되도록 수정

ForeginKey를 설정하는 필드는 ModelChoiceField이다.
ModelChoiceField는 모델간의 관계를 나타내는 필드로 queryset을 필수로 작성해야 한다.

required를 이용해 없어도 되도록 설정한다.

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