[pinterest clone (35)] WYSIWYG 적용

WYSIWYG(위지윅): What You See Is What You Get

Medium Editor 를 사용하여 WYSIWYG를 통해 게시글을 작성할 수 있도록한다.

github.com/yabwe/medium-editor

yabwe/medium-editor

articleapp/forms.py

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 text-left',
                                                           'style': 'height: auto;'}))

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

 

create.html

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

{% block content %}
<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">
            <h4>Article Create</h4>
        </div>
        <form action="{% url 'articleapp:create' %}" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {% bootstrap_form form %}
            <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3">
        </form>
    </div>

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

{% endblock %}

detail.html

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

safe 필터로 태그같은건 없애준다.