Django集成Markdown编辑器【附源码】

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

<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>

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

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);
    }

});

<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>

<div id="editormd-view">
    <textarea style="display:none;"># 站点介绍
- site：**运维咖啡吧**
- url：[https://ops-coffee.cn](https://ops-coffee.cn)
- slogen: **追求技术的道路上，我从不曾停下脚步**

# 代码示例
```python
def hello():
    print('欢迎关注微信公众号【运维咖啡吧】')
```

# 图片示例
![扫码关注查看更多原创文章](/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>

{
    success : "状态码0或1", //0表示上传失败;1表示上传成功
    message : "提示信息", //上传成功或失败返回的信息
    url     : "图片地址" //上传成功时才返回
}

@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'})

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