Django零代碼集成 Markdown 編輯器

自己一個項目中要加個功能，涉及到富文本編輯器，首選markdown編輯器，因為簡單。將操作筆記記錄下來方便下次翻閱，順便幫助有需要的同學(xué)。

基于django的markdown編輯器已經(jīng)有人封裝好了，不需要自己去造輪子。django-mdeditor 是基于Editor.md 這個前端開源庫封裝而成的。

總共涉及到兩個庫 django-mdeditor 用于 django admin 管理后臺文章編輯， markdown 用在前臺 markdown文本渲染成html 展示。

pip install django-mdeditor  # 用于后臺編輯
pip install markdown # 用于前端顯示

不需要寫什么代碼，基本就是做些配置

首先 settings.py 中添加配置，將mdeditor 這個app加進來

INSTALLED_APPS = [
    ... 省略 ...
    'mdeditor',
]

urls.py 中添加path（注意路徑不要配錯了，前面沒有/）

 path("mdeditor/", include('mdeditor.urls'))

修改models中的field的類型，之前是TextField，改成MDTextField

from mdeditor.fields import MDTextField

class Article(BaseModel):
    title = models.CharField("標(biāo)題", max_length=200, editable=True, blank=True)
    body = MDTextField("正文", default="", editable=True, blank=True)

將 Article 在admin中注冊后，可以看到如下效果，左邊是編輯器，右邊是預(yù)覽，很方便

部署到線上環(huán)境時，要記得執(zhí)行命令

 python manage.py collectstatic

把靜態(tài)文件收集到 STATIC_ROOT 中， 否則 django-mdeditor 依賴的靜態(tài)資源找不到就沒法加載markdown編輯器出來了。

前端展示處理

先在服務(wù)端將markdown渲染成html返回給前端處理

import markdown
 
def detail(request, pk):
    article = get_object_or_404(Article, pk=pk)
    article.body = markdown.markdown(article.body,
                                  extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ])
    return render(request, 'article/detail.html', context={'article': article})

模板代碼

<div>
    {{ post.body|safe }}
</div>

完工！

另外還留下一個問題，上傳圖片時默認(rèn)上傳到本地，考慮將其改造一下，直接上傳阿里云。

https://github.com/pylixm/django-mdeditor

- EOF -

回復(fù)關(guān)鍵字“簡明python ”，立即獲取入門必備書籍《簡明python教程》電子版
回復(fù)關(guān)鍵字“爬蟲”，立即獲取爬蟲學(xué)習(xí)資料

版權(quán)申明：內(nèi)容來源網(wǎng)絡(luò)，版權(quán)歸原創(chuàng)者所有。除非無法確認(rèn)，都會標(biāo)明作者及出處，如有侵權(quán)，煩請告知，我們會立即刪除并致歉。我們對文中觀點保持中立，僅供參考、交流之目的。

推薦