文档章节

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

运维咖啡吧
 运维咖啡吧
发布于 01/24 18:49
字数 1648
阅读 47
收藏 1

专注内容写作的你一定不要错过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"直接获取源码地址,期待你的到来


长按关注公众号查看更多原创文章

如果你觉得文章不错,请点右下角【好看】。如果你觉得读的不尽兴,推荐阅读以下文章:

© 著作权归作者所有

运维咖啡吧
粉丝 36
博文 43
码字总数 76876
作品 1
浦东
架构师
私信 提问
在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器; 定制...

Kinegratii
2014/08/31
5.4K
0
Kiwi TCMS 6.3 发布,全功能测试用例管理系统

Kiwi TCMS 6.3 已发布,Kiwi TCMS 是一个集测试计划、测试运行和测试用例于一身的管理系统,用 Python 和 Django 编写。它具有许多强大的功能,如 Bugzilla 和 JIRA 集成,快速测试计划和运行...

王练
2018/12/05
710
1
个人博客系统--newBlog

newBlog 是一个基于 Django 框架开发的个人博客系统,开发环境 Python 2.7 Django 1.5.5 Mysql 5.5 Boostrap 功能 1.写博(基于Markdown编辑器) 2.上传博客(将.md文件上传后自动生成博客,如...

tube
2014/12/18
2.3K
0
SpringMVC项目中集成Markdown富客户端

java中集成Markdown富客户端 虽然在项目中,可能很少会给客户用到Markdown编辑器,毕竟你不能指望最终用户会明白这些语法,但假如是做一个自用的系统,比如自己的一个blog,那么集成一个Mar...

双鱼座的牛
2017/08/31
0
0
Leanote v1.0-beta.3 发布,个人云笔记

Leanote一直坚持着让知识编辑更简单的理念不断完善Leanote. 今天 Leanote v1.0-beta.3 发布了, 这一版对编辑器的功能做了极大的改进. 主要改进代码编辑器及使用全新Markdown编辑器, 和新增加...

lifephp
2015/01/12
5.7K
29

没有更多内容

加载失败,请刷新页面

加载更多

Andorid SQLite数据库开发基础教程(2)

Andorid SQLite数据库开发基础教程(2) 数据库生成方式 数据库的生成有两种方式,一种是使用数据库管理工具生成的数据库,我们将此类数据库称为预设数据库,另一种是使用代码生成的数据库。...

大学霸
24分钟前
3
0
YecPad 开源啦!: 基于C#的功能强大的可编辑记事本文本编辑软件

JY Lin 开源:YecPad : 基于C#的功能强大的可编辑记事本文本编辑软件 YecPad 是一款基于C#编程语言开发的功能强大的可编辑记事本文本编辑软件。 可以进行文本文件的打开、保存、删除及编辑功...

YDOOK
31分钟前
3
0
StringBuilder 与 StringBuffer 的区别

StringBuffer是线性安全的,支持并发操作,适合多线程。 StringBuilder线性不安全,不支持并发操作,适合单线程。 也就是说他们俩区别就在于支不支持并发操作,使用上基本上类似...

无名氏的程序员
34分钟前
3
0
js 找数组中的最值

本文转载于:专业的前端网站➸js 找数组中的最值 背景: 2个数组以下 , 比如 [[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]] 找最值的时候,我一开始想用两个...

前端老手
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部