django 中引入markdown編輯器丨【生長吧！Python】

在做wiki文檔的時候需要引入markdown編輯器，在此記錄一下

django 中引入markdown編輯器

1. textarea 輸入框 --> markdown編輯器

首先，我這里是使用 Form生成的表單，markdown 編輯器實質上就是替換 Form生成的 TextArea

models 如下：

content = models.TextField(verbose_name='內容')

在前端頁面中，使用 for循環生成，部分代碼如下

{% for field in form %}

既然我們是要進行替換，那么在循環中if判斷一下就好，如果name='content'，我們給它再套一個div, 并給其添加一個屬性id="editor"。修改后代碼如下：

{% for field in form %} {% if field.name == 'content' %}

查看瀏覽器，我們也可以看到content帶有id="editor"

至于 markdown編輯器，我這里使用的是 mdeditor

github地址為： editor.md

我們將其下載到本地

下載比較慢的話，

我這里將文件網盤鏈接放在了文末，需要可以自行下載。

下載好以后，將其放在項目的static文件夾下。導入后，在examples中我們可以看到一些離線示例

2. editor-md 的使用

要使用md編輯器，需要先從靜態文件中引入其css和js

在js腳本中對md編輯器進行初始化

$(function () { initEditorMd(); }); function initEditorMd() { // 第一個參數是頁面中位置（如上，我這里是id="editor"） // 第二個參數是生成md編輯器后的配置 editormd('editor', { placeholder: "請輸入內容", height: 500, }) }

當我們引入文件并完成初始化后，打開網頁發現md編輯器一直在轉圈圈加載

然后我們看一下后臺的記錄，有好多依賴文件加載失敗

Not Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.css [16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/codemirror.min.css HTTP/1.1" 404 6691 Not Found: /manage/4/wiki/add/lib/codemirror/addon/search/matchesonscrollbar.css [16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/addon/search/matchesonscrollbar.css HTTP/1.1" 404 6742 Not Found: /manage/4/wiki/add/lib/codemirror/addon/dialog/dialog.css [16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/addon/dialog/dialog.css HTTP/1.1" 404 6706 Not Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.js

根據報錯信息，我們查看 editor-md/lib, 發現lib下面仍有一些js文件，也就是markdown組件內部依賴的一些文件，因為我們沒有指明lib文件位置，編輯器加載的時候沒找到依賴組件，就會報如上錯誤

我們在path指明lib的路徑就好了

editormd('editor', { placeholder: "請輸入內容", height: 500, path: "{% static 'plugin/editor-md/lib/' %}" })

我們再次查看網頁，可以看到，markdown編輯器能夠加載出來了。

最后，還有一個小問題，我md全屏顯示的時候，可能會遇到下面這種問題，這是由于css樣式分層導致（z-index），我們只要改一下md編輯器的z-index，讓其全屏時大于所有的z-index即可。（z-index默認為1000）

.editormd-fullscreen { z-index: 1001; }

這樣就可以實現md全屏編寫了。

3. Markdown預覽

經過上述步驟，已經能夠實現markdown在頁面進行展示了，然后實現一下markdown預覽。

同樣的，前端頁面i將content放在 div中

然后引入css和js

最后，編寫js初始化函數

$(function () { initPreviewMarkdown(); }); function initPreviewMarkdown() { editormd.markdownToHTML("previewMarkdown", { // 內容過濾，防止xss攻擊等 htmlDecode: "style, script, iframe" }); }

editor-md

鏈接：https://pan.baidu.com/s/1CL4EwtP9WHYSOlG8AGhn9g

提取碼：oxd1

【生長吧！Python】有獎征文火熱進行中：https://bbs.huaweicloud.com/blogs/278897

Django Markdown Python

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。