Django集成Markdown編輯器【附源碼】

專注內容寫作的你一定不要錯過markdown

簡單介紹

markdown是一種標記語言，通過簡單的標記語法可以使普通的文本內容具有一定的格式，使用非常簡單，學習成本極低

目前各大Blog平臺都已支持markdown編輯器，某道雲筆記也已支持markdown，各開源Blog，Wiki都在逐漸投入markdown的懷抱，身爲技術人員如果現在還不知道markdown的話可能會被大佬diss

editor.md是一款開源的的markdown編輯器，體驗流暢且界面友好，被諸多系統所採用，本篇文章也主要使用editor.md編輯器做介紹

項目集成

editor.md編輯器的使用非常簡單，只需如下幾步

github下載軟件放到項目內，這裏我放在static/plugins下

git pull https://github.com/pandao/editor.md.git

頁面引入css、js文件

<link rel="stylesheet" href="/static/plugins/editor.md/css/editormd.min.css">

// 依賴jquery，自行引入或參考demo
<script src="/static/plugins/editor.md/js/editormd.min.js"></script>

創建一個DOM容器來容納編輯器

<div id="editormd"></div>

通過editormd方法來實例化容器

var testEditor = editormd("editormd", {
    width: "100%",
    height: 720,
    syncScrolling: "single",
    path: "/static/plugins/editor.md/lib/",
    
    // 設置主體顏色
    theme : "dark",
    previewTheme : "dark",
    editorTheme : "pastel-on-dark",
    
    markdown : md,
    codeFold : true,
    //syncScrolling : false,
    saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
    searchReplace : true,
    //watch : false,                // 關閉實時預覽
    htmlDecode : "style,script,iframe|on*",            // 開啓 HTML 標籤解析，爲了安全性，默認不開啓    
    //toolbar  : false,             //關閉工具欄
    //previewCodeHighlight : false, // 關閉預覽 HTML 的代碼塊高亮，默認開啓
    emoji : true,   // 啓用emoji表情
    taskList : true,    // 啓用tasklist
    tocm            : true,         // Using [TOCM]
    tex : true,                   // 開啓科學公式TeX語言支持，默認關閉
    flowChart : true,             // 開啓流程圖支持，默認關閉
    sequenceDiagram : true,       // 開啓時序/序列圖支持，默認關閉,
    //dialogLockScreen : false,   // 設置彈出層對話框不鎖屏，全局通用，默認爲true
    //dialogShowMask : false,     // 設置彈出層對話框顯示透明遮罩層，全局通用，默認爲true
    //dialogDraggable : false,    // 設置彈出層對話框不可拖動，全局通用，默認爲true
    //dialogMaskOpacity : 0.4,    // 設置透明遮罩層的透明度，全局通用，默認值爲0.1
    //dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色，全局通用，默認爲#fff

    imageUpload: true, //開啓圖片上傳
    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"], //支持上傳的圖片格式
    imageUploadURL: "{% url 'api-upload-url' %}" //處理圖片上傳的後端URL地址
    // 圖片上傳後可以在onload裏做進一步處理
    onload : function() {
        console.log('onload', this);
        //this.fullscreen();
        //this.unwatch();
        //this.watch().fullscreen();

        //this.setMarkdown("#PHP");
        //this.width("100%");
        //this.height(480);
        //this.resize("100%", 640);
    }

});

editor.md提供了很多配置參數可以用了配置編輯器，根據自己環境選擇使用，具體參考官方文檔

這裏配置了圖片上傳的三個參數imageUpload、imageFormats、imageUploadURL，在下邊圖片上傳的地方會用到

一個基於editor.md的markdown編輯器就誕生了

頁面展示

如果頁面不涉及編輯，單純展示，那麼則需要引入如下JS/CSS文件

<link href="/static/plugins/editor.md/css/editormd.preview.min.css" rel="stylesheet"/>

<script type="text/javascript" src="/static/plugins/editor.md/lib/marked.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/prettify.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/raphael.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/underscore.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/sequence-diagram.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/flowchart.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" src="/static/plugins/editor.md/js/editormd.min.js"></script>

初始化DOM容器

<div id="editormd-view">
    <textarea style="display:none;"># 站點介紹
- site：**運維咖啡吧**
- url：[https://ops-coffee.cn](https://ops-coffee.cn)
- slogen: **追求技術的道路上，我從不曾停下腳步**

# 圖片示例
![掃碼關注查看更多原創文章](/static/img/qrcode.jpg)</textarea>
</div>

實例化

<script type="text/javascript">
$(function () {
  var EditormdView = editormd.markdownToHTML("editormd-view", {
    htmlDecode: "style,script,iframe",  // you can filter tags decode
    emoji: true,
    taskList: true,
    tex: true,  // 默認不解析
    flowChart: true,  // 默認不解析
    sequenceDiagram: true  // 默認不解析
  });
});
</script>

圖片上傳

圖片是內容編輯中不可缺少的元素，markdown作爲標記語言默認不存儲圖片，僅有url引用標記，editor.md提供了圖片上傳的方法，當然需要配合後端程序一起將用戶選擇的圖片進行本地或雲端存儲

接下來我們看一個圖片上傳存儲服務器本地的案例

editor.md接收json格式的返回數據，服務端在處理完圖片上傳之後需要按照如下格式返回數據

{
    success : "狀態碼0或1", //0表示上傳失敗;1表示上傳成功
    message : "提示信息", //上傳成功或失敗返回的信息
    url     : "圖片地址" //上傳成功時才返回
}

先編寫一個upload的函數來處理上傳，最終返回上邊的json格式數據即可

@csrf_exempt
def upload(request):
    upload_file = request.FILES['imagefile']
    if request.method == 'POST' and upload_file:
        success, message = 0, '上傳失敗'

        # 本地創建保存圖片的文件夾
        path = settings.STATIC_URL + 'upload/' + time.strftime('%Y%m%d') + '/'
        if not os.path.exists(settings.BASE_DIR + path):
            os.makedirs(settings.BASE_DIR + path)

        # 拼裝本地保存圖片的完整文件名
        filename = time.strftime('%H%M%S') + '_' + upload_file.name
        local_file = settings.BASE_DIR + path + filename

        # 寫入文件
        with open(local_file, 'wb+') as f:
            for chunk in upload_file.chunks():
                f.write(chunk)

            success, message = 1, '上傳成功'

        # 返回格式
        data = {
            'success': success,
            'message': message,
            'url': path + filename
        }

        return JsonResponse(data)
    else:
        return JsonResponse({'state': 0, 'message': 'Not support method or Can not get file'})

由於前端頁面採用post方式上傳，會遇到CSRF問題導致403，這裏我們通過添加裝飾器@csrf_exempt來取消CSRF驗證

接着添加一個url地址指向這個view

path('api/upload/', upload, name='api-upload-url'),

上邊我們已經配置過editormd上傳圖片相關的image參數了，就可以直接通過編輯器工具欄上的上傳圖片圖標上傳圖片到服務器本地

如果要上傳圖片到第三方的雲存儲，參考雲存儲提供的API修改upload的view函數即可

源碼地址

寫本文時順便寫了個demo，方便有問題的小夥伴對比查看，地址如下：

aHR0cHM6Ly9naXRodWIuY29tL29wcy1jb2ZmZWUvZGVtby90cmVlL21hc3Rlci9tYXJrZG93bg==

URL經過簡單加密，解密即可獲取，或關注微信公衆號【運維咖啡吧】回覆"02"直接獲取源碼地址，期待你的到來

---

如果你覺得文章不錯，請點右下角【好看】。如果你覺得讀的不盡興，推薦閱讀以下文章：

• Django+Echarts畫圖實例
• Django開發密碼管理表實例【附源碼】