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開發密碼管理表實例【附源碼】