Djangoでマークダウンを使ってブログを書く方法（Texも使用可能）

## 概要
djangoを使ってブログを書こうとしていろいろ模索していたところ、めちゃくちゃ簡単にQiitaと同じようにブログを書く方法を見つけたので、そのことについて書いていきます。

Adminにログインすると、以下の図のようなテキストフィールドが現れるようになります。
<img width="1430" alt="スクリーンショット 2020-04-18 17.17.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328421/e2a02bdb-a464-0298-cf18-4bb9a6e3adae.png">



## 環境
Django=2.2.5
python=3.8.2
PC : mac(catalina)


## 使用するパッケージ

今回は、[django-mdeditor](https://github.com/pylixm/django-mdeditor)を使います。

## パッケージのインストール

```shell

pip install django-mdeditor
```
または

```shell

pipenv install django-mdeditor
```
でインストールします。

## settings.py の変更
settings.pyのなかの`INSTALLED_APPS `に`'mdeditor'`を追加します。

```Django
INSTALLED_APPS = [
        ...
        'mdeditor',
    ]
```
django3 以上を使っている場合はフレーム設定を追加します。

```
X_FRAME_OPTIONS = 'SAMEORIGIN' 
```

mediaURLを追加していない場合は追加してください。

```
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
```

## urls.pyの設定

urlpatternsにメディアを追加します。

```Django

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
...

urlpatterns = [
    ...
]

if settings.DEBUG:
    # static files (images, css, javascript, etc.)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```

## モデルの作成

次に簡単なモデルを作成します。

```
from django.db import models
from mdeditor.fields import MDTextField

class Article(models.Model):
    title = models.CharField(max_length=200)
    body = MDTextField()
    
    def __str__(self):
        return self.title
```

作成したら、`python manage.py makemigrations` と `python manage.py migrate `を順に実行してください。
これでモデルの作成は完了です。

Adminにログインすると、以下の図のようなテキストフィールドが現れるようになります。
<img width="1430" alt="スクリーンショット 2020-04-18 17.17.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328421/e2a02bdb-a464-0298-cf18-4bb9a6e3adae.png">


## formで表示する場合

アプリ内のform.pyに次のようなformを作成します。

```python:app-name/forms.py

class MDEditorModleForm (forms.ModelForm):

    class Meta:
        model = Article
        fields = '__all__'
```
最後にテンプレートファイルとして次を追加します。

```Django

{% load static%}
<! DOCTYPE html>
<html lang = "en">
    <head>
        <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />

    </ head>
    <body>
        <form method = "post" action = "./">
            {% csrf_token%}
            {{form.media}}
            {{form.as_p}}
            <p> <input type = "submit" value = "post"> </ p>
        </ form>
    </ body>
</ html>
```
これでweb上でも同じようなテキストフィールドを表示できるようになります。

## ツールバーの変更
以下をsettings.pyに追加して、ツールバーを変更することができます。

```
MDEDITOR_CONFIGS = {
    'default':{
        'width': '90% ',  # Custom edit box width
        'heigth': 500,  # Custom edit box height
        'toolbar': ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime"
                    "emoji", "html-entities", "pagebreak", "goto-line", "|",
                    "help", "info",
                    "||", "preview", "watch", "fullscreen"],  # custom edit box toolbar 
        'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  # image upload format type
        'image_folder': 'editor',  # image save the folder name
        'theme': 'default',  # edit box theme, dark / default
        'preview_theme': 'default',  # Preview area theme, dark / default
        'editor_theme': 'default',  # edit area theme, pastel-on-dark / default
        'toolbar_autofixed': True,  # Whether the toolbar capitals
        'search_replace': True,  # Whether to open the search for replacement
        'emoji': True,  # whether to open the expression function
        'tex': True,  # whether to open the tex chart function
        'flow_chart': True,  # whether to open the flow chart function
        'sequence': True, # Whether to open the sequence diagram function
        'watch': True,  # Live preview
        'lineWrapping': False,  # lineWrapping
        'lineNumbers': False  # lineNumbers
    }
    
}
```

## 参考
- https://github.com/pylixm/django-mdeditor
- https://yuki.world/django-markdown-implement/