測試成功環境： 
python：3.5.4 
os：Deepin 15.5 
Django：2.0 
IDE：pycharm

Django整合django-mdeditor

注：博主再寫個人部落格時，找了好久的編輯器，tinymce醜的一批，DjangoUeditor我沒有做出來實時預覽的效果，只有這個看著比較好，一是有普通編輯器具備的大部分功能，二是屬於主流的markdown語法，比較適合使用，三是可以實時預覽。。最主要的還是比較容易新增到admin介面

1.安裝django-mdeditor

pip install django-mdeditor

2.在專案的settings.py的INSTALLED_APPS中新增’mdeditor’,

3:新增路徑到設定中

MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')  #uploads必須存在，且在專案目錄下
MEDIA_URL = '/media/'   #你上傳的檔案和圖片會預設存在/uploads/editor下

4：新增設定到你的url中

from django.conf.urls import url, include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin
from
 
 django.urls import path

urlpatterns = [
    path('admin/',admin.site.urls),
    url(r'mdeditor/', include('mdeditor.urls')),
]

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

5.新增一個app

python manage.py
 
 startapp article

開啟Test，在models.py中新增

from django.db import models
from mdeditor.fields import MDTextField #必須匯入

class Article(models.Model):
    name = models.CharField(max_length=10)
    content = MDTextField()    #注意為MDTextField()

6:在Blog/admin.py中註冊

from django.contrib import admin

# Register your models here.
from Blog.models import *

admin.site.register(Article)

7:效果如下：（注：因為我覺得django自帶的admin不太好看，所以後臺使用了django-suit替換掉了預設的admin介面，所以看起來不太一樣，如果你也修改admin介面的話，可以看我另一篇文章）

還支援全屏編寫，並實時預覽，全屏效果如下

到了這個時候，後臺的介面已經整合markdown編輯器完畢，可能有需要在前端介面顯示出來，雖然沒什麼難度，但還是再寫寫

8：如果需要在前臺顯示的話，可以在view.py獲取到資料庫的資料後，使用markdown.markdown()修飾為html語句，然後傳到前端顯示

注：使用markdown.markdown()必須先安裝markdown

pip install markdown

在view.py中匯入包 import markdown

如圖所示：

程式碼解釋(注：解釋是在百度上找的，其實直接加上就行了，不用知道啥意思)：這樣我們在模板中展示 {{ article.content }} 的時候，就不再是原始的 Markdown 文字了，而是渲染過後的 HTML 文字。注意這裡我們給 markdown 渲染函式傳遞了額外的引數 extensions，它是對 Markdown 語法的拓展，這裡我們使用了三個拓展，分別是 extra、codehilite、toc。extra 本身包含很多拓展，而 codehilite 是語法高亮拓展，這為我們後面的實現程式碼高亮功能提供基礎，而 toc 則允許我們自動生成目錄。

在前端顯示時必須使用safe過濾器，如下圖

前端效果如下（注：只是前面這些操作，程式碼都是一個顏色，並不會高亮的，如果想做到程式碼高亮，接著向下看）

9：實現程式碼高亮
首先我們需要安裝 Pygments，啟用虛擬環境，執行下面的命令安裝即可。

pip install Pygments 

執行如下命令

pygmentize -S default -f html -a .codehilite > code.css

在資料夾下會發現生成了code.css檔案，將這個css檔案加入到你的static資料夾下css裡面(路徑自己定，只要用的時候引入正確就行了)

最後一步在需要高亮的html檔案裡面匯入剛剛生成的css檔案，例如我的是

<link rel="stylesheet" type="text/css" href="{% static 'css/code.css' %}">  {#語法高亮#}

前面的markdown下必須加入 ‘markdown.extensions.codehilite’高亮效果才會生效

 extensions=[
              'markdown.extensions.extra',
               'markdown.extensions.codehilite',
               'markdown.extensions.toc',
           ])

重新整理前臺，顯示程式碼已經高亮。

追加：使用過程中發現了一個問題，就是markdown的換行問題，在前端介面換行顯示有問題，並沒有br標籤，這是因為在markdown語法中兩個空格加一個換行才是換行，或者兩個換行才是一個換行

可使用article.content.replace(“\r\n”, ’ \n’）解決，把換行符替換成兩個空格+換行符，這樣經過markdown轉換後才可以轉成前端的br標籤

    article.content = markdown.markdown(article.content.replace("\r\n", '  \n'),extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ],safe_mode=True,enable_attributes=False)