Django2.0中使用MrakDown編輯器並在前端顯示

前言

在使用Django的過程中，有一個使用文字編輯器的需求，原本使用的是富文字編輯器django-ckeditor但是它不是MarkDown編輯器，經過一翻尋找我找到了Editor.Md這個專案，這是一款優秀的MrakDown編輯器，並且有人貼心得把它移植到了Django上，下面我記載一下使用方法

本文所用的作業系統為Deepin 15.8

Python版本:Python 3.6.5

Django版本:2.0

新增編輯器到後臺

首先我們需要安裝編輯器，這個編輯器在GitHub的地址是:

1. 安裝django-mdeditor:

   sudo pip3 install django-mdeditor
   

2. 然後在專案目錄的settings.py加入:

   INSTALLED_APPS = [
         ...
         'mdeditor',
   ]
   

3. 新增媒體路徑到設定中:

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

4. 在專案的urls.py中加入:

   from django.contrib import admin
   from django.
    
   urls import path, include
   from django.conf import settings
   from django.conf.urls.static import static
   from . import views
   urlpatterns = [
       path('admin/', admin.site.urls),
       path('blog/', include('blog.urls')),
       path('mdeditor/', include('mdeditor.urls')),
   ]
   urlpatterns += static(settings.MEDIA_URL,
    
    document_root=settings.MEDIA_ROOT)
   
   

5. 新增一個部落格APP:

   此過程不表，假設你已經建立好一個部落格app，並且在admin.py註冊了model,在models.py中新增:

   from django.db import models
   from mdeditor.fields import MDTextField
   
   class Blog(models.Model, ReadNumExpandMethod):
       title = models.CharField(max_length=50)  
       content = MDTextField()  # 型別為編輯器提供的欄位
   

   然後執行:

   python3 manage.py makemigrations
   python3 manage.py migrate
   

此時開啟我們的後臺，應該已經可以看到效果了:

前端渲染

此時，後臺雖然已經有了MarkDown編輯器，但是在前端並沒有展示出來,我們需要用一些方法在前端顯示.

首先需要安裝一個第三方庫:

pip3 install markdown

此時我們已經在models.py裡面註冊了這個子段，我們需要在views.py中顯示出來,我是返回了一個字典，讀者可以根據自己的需要，找到具體的內容，呼叫markdown方法來解析成html返回給前端:

blog/views.py

import markdown
from django.shortcuts import render_to_response, get_object_or_404

def blog_detail(request, blog_pk):  # 部落格內容
    context = {}
    context['blog'] = get_object_or_404(Blog, id=blog_pk)
    context['blog'].content = markdown.markdown(context['blog'].content,
                                                extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    response = render_to_response("blog/blog_detail.html", context)  
    return response

這樣我們在模板中展示 {{ blog.content }} 的時候，就不再是原始的 Markdown 文字了，而是渲染過後的 HTML 文字。注意這裡我們給 markdown 渲染函式傳遞了額外的引數 extensions，它是對 Markdown 語法的拓展，這裡我們使用了三個拓展，分別是 extra、codehilite、toc。extra 本身包含很多拓展，而 codehilite 是語法高亮拓展，這為我們後面的實現程式碼高亮功能提供基礎.

在前端呼叫的時候，此時支援顯示純粹的html程式碼，我們需要在前端解析html，可以這樣:

在對應模型標籤中填入{{ blog.content|safe }}即可.

此時效果為:

接下來有程式碼高亮的環節，這些內容不在本文討論範圍之內，請自行搜尋.

參考部落格

1. Django2.0整合markdown編輯器
2. 支援 Markdown 語法和程式碼高亮