0. 開端

肯定有很多人想要在自己的網站裡整合一個漂亮的 Markdown 編輯器。
所以說，今天我們就要教大家如何整合一個簡單且好看 Markdown 編輯器。

1. 選型

此處比較推薦 django-mdeditor。

優點：

1. 它作為富文字編輯器的時候，頁面好看且直觀。
2. 作為 MarkDown 編輯器，它對所有基礎語法都是支援的。
3. 完美相容 Django Form 類。

缺點：

1. 當你忘記在行末加上標記換行時的兩個空格直接換行的話，它的預覽頁面是照常換行的。但是！我們解析 Markdown 使用的 markdown 庫是不能不加空格的！
2. 不支援 $\LaTeX$ 預覽。
3. 可能是部落格園同款

2. 配置

此處我們先按照慣例，先安裝這個庫：

pip install django-mdeditor

為了解析我們寫出來的 Markdown 文字，我們還要再安裝另外一個庫：markdown。它可以將 Markdown 文字轉為 HTML 的程式碼。

pip install markdown

然後接下來，為了能夠儲存圖片，我們還要在 Django 專案設定裡面加上幾行程式碼：

INSTALL_APPS = [
    ....
    'mdeditor', # 要記得在 INSTALL_APPS 裡面加上安裝的庫
]

# 跳過一堆配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'image/') 
# MEDIA_ROOT 的含義就是使用者上傳的檔案存在系統的哪裡
# 另外你有記得 import os 嗎？
MEDIA_URL = '/image/'
# MEDIA_URL 的含義是使用者從那個URL訪問到由使用者上傳的檔案
 

我們還需要在專案配置的 urls.py 里加點東西：

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

# 跳過

urlpatterns = [
    ....
    url(r'mdeditor/', include('mdeditor.urls')),
    # 和你自己的專案同理，第三方庫想要使用，也需要自己的一畝三分地
]

if settings.DEBUG: # 如果正在除錯模式下的話
    urlpatterns += static(settings.MEDIA.URL, document_root=settings.MEDIA_ROOT)
 

3. 實踐

我們先創立一個臨時小專案。
然後新建一個 APP，加 URL，走流程
然後，我們在APP中新建 form.py
我們在 form.py 裡匯入 mdeditor 庫
然後用 MDTextFormField() 代替 models.CharField()

from django import forms
from mdeditor.fields import MDTextFormField

class MarkdownForm(forms.Form):
    markdown = MDTextFormField()

# 應該可以理解吧

然後為了儲存下來這個表單，我們還需要一個 model ：

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

class Markdown(models.Model):
    markdown_text = MDTextField()
    html_text = models.TextField() # 這玩意幹嘛用？待會兒就知道了

然後，我們要在 views.py 裡處理表單和表單傳回來的資料：

from django.shortcuts import render
from .forms import MarkdownForm
from .models import Markdown
import markdown

def index(request):
    form = MarkdownForm()
    context = {'form':form}
    return render('index.html', context=context)

def process(request):
    markdown_text = request.POST['markdown']
    html_text = markdown.markdown(markdown_text)

    new_markdown = Markdown()
    new_markdown.markdown_text = markdown_text
    # html_text 指的是 markdown_text 渲染出來的 HTML 程式碼
    # 渲染了這一次，以後都不用渲染了
    new_markdown.html_text = html_text
    new_markdown.save()

TIPS：在前端渲染這個表單是要注意，還需要在前面加上一句

{{ form.media }}

這句話用於渲染表單所需的 CSS 和 JS 檔案，要不然長相一塌糊塗......
然後，我們要在前端渲染 html_text，要記得要取消把 html_text 轉義：

{{ html_text|safe }}

如果你不取消轉義的話，Django Template Language 為了你的網站安全起見，會將這一堆 HTML 程式碼原本的模樣顯示出來，那麼你將會在螢幕上看到一大坨 HTML 程式碼和一張驚奇的臉。

最後的效果還是不錯的：

PS：此處偷懶的作者沒寫模板，直接用的自己的網站的圖片
到了這一步，你一定會將 Markdown 整合進你的表單，寫出更好的富文字體驗了吧！
所以說，現在將它加進專案中吧！