WYSIWYG의 소개 및 적용 (작정하고 장고 44강)

44강

• Medium Editor 를 사용하여 WYSIWYG를 통해 게시글 작성할 수 있도록 만들어보기

WYSIWYG

게시판 기능 중 하나

텍스트를 좀 더 굵게하거나 크게하거나 글을 쓸 때 좀 더 풍부하게 해주기

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

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

articleapp/forms.py

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

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

For the latest version:

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

instantiate a new MediumEditor object:

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