在Django中使用editor.md部属markdown编辑器的一些分享

我平时很喜欢markdown来写东西，最近在用django做一个自己的博客系统，这时我就想到了怎么在django中部属markdown编辑器，在网上找了一下发现了一个很好用的js插件叫 editor.md

1、下载

下载 editor.md：http://pandao.github.io/editor.md/examples/
这是这个插件的官网

下载下来后目录结构是这样的

2、部属

然后我们把它整个拷到我们的项目里面，我这里是放到我的项目下的static目录中的插件目录中

3、配置

然后我们新建一个页面
html的代码很简单

 <div id="test-editormd">
        <textarea name="content" style="display:none;"></textarea>
 </div>

别忘了导入我们的js和css，直接从我们的插件目录里导入

<!-- 我这里用了django的模版语法，大家配置的时候按照自己的路径来就可以了 -->
<!-- 导入css -->
<link rel="stylesheet" href="{% static 'plugins/editor-1.md-master/css/editormd.css' %}"/>
<!-- 导入js -->
<script src="{% static 'plugins/editor-1.md-master/editormd.js' %}"></script>

实测导入这两个文件就可以了，对了，别忘了先要导入jquery

然后我们初始化一下插件
这里要注意，我用模版语法的地方，路径全部要设置成自己的路径，不然后面会出现问题的，一开始我看别的教程部属的时候就是这个地方出了问题花了很长时间。

<script>
        var testEditor;
        $(function () {
            $.get("{% static 'plugins/editor-1.md-master/examples/test.md' %}", function (md) {
                testEditor = editormd("test-editormd", {
                    width: "98%",
                    height: 730,
                    path: '{% static 'plugins/editor-1.md-master/lib/' %}',
                    markdown: md,
                    codeFold: true,
                    saveHTMLToTextarea: true,
                    searchReplace: true,
                    htmlDecode: "style,script,iframe|on*",
                    emoji: true,
                    taskList: true,
                    tocm: true,         // Using [TOCM]
                    tex: true,                   // 开启科学公式TeX语言支持，默认关闭
                    flowChart: true,             // 开启流程图支持，默认关闭
                    sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    {#imageUploadURL: "{% static 'plugins/editor-1.md-master/examples/php/upload.php' %}",#}
                    imageUploadURL: "{% url 'blog:blog_img_upload' %}",
                    onload: function () {
                        console.log('onload', this);
                    },

                    {#/**设置主题颜色 把这些注释去掉主题就是黑色的了*/#}
                    {#editorTheme: "pastel-on-dark",#}
                    {#theme: "dark",#}
                    {#previewTheme: "dark"#}
                });
            });
        });

    </script>

然后我们把urls，view都写一下，运行一下试试

效果已经出来了，但是这时候我们尝试上传图片，还有点击emoji是不能用的

别着急，接下来我们就来解决这两个问题

4、调试

一、我们先解决emoji的问题
其实emoji打不开的原因是这个插件原来的emoji地址是远程指向另一个网址的，现在那个网址失效了，所以emoji都裂了

所以我们把emoji下载下来部属到本地就行了

我打包传到网盘上了 链接:https://pan.baidu.com/s/1aIBSauBGwEP_9SmTSi4vnA 密码:35sp

下载下来，和刚才一样解压缩直接放到插件目录下
接下来我们要打开editormd.js文件，注意 是之前导入过的那个editormd.js文件。
然后我们搜索editormd.emoji字段
找到这个地方的path
把原来的路径改成我们本地的路径

ok，运行试一下，搞定了

二、上传图片

最后一步是上传文件，点击上传图片按钮之后，其实是发送了一个post的ajax请求，它需要的返回值是这样的

{'success': 1或者0 （1是成功）, 
'message': '成功以后的信息',
 'url': url （图片的url，重要，用于后面显示图片的，就是你处理完之后，图片保存在服务器上的路径）}

我这里把我的代码举例一下，每个人要实现的图片上传功能不一样的，大家按自己的写就行

# 写博客上传图片
@check_logined
def blog_img_upload(request):
    if request.method == "POST":
        data = request.FILES['editormd-image-file']
        img = Image.open(data)
        width = img.width
        height = img.height
        rate = 1.0  # 压缩率

        # 根据图像大小设置压缩率
        if width >= 2000 or height >= 2000:
            rate = 0.3
        elif width >= 1000 or height >= 1000:
            rate = 0.5
        elif width >= 500 or height >= 500:
            rate = 0.9

        width = int(width * rate)  # 新的宽
        height = int(height * rate)  # 新的高

        img.thumbnail((width, height), Image.ANTIALIAS)  # 生成缩略图

        url = 'blogimg/' + data.name
        name = settings.MEDIA_ROOT + '/' + url
        while os.path.exists(name):
            file, ext = os.path.splitext(data.name)
            file = file + str(random.randint(1, 1000))
            data.name = file + ext
            url = 'blogimg/' + data.name
            name = settings.MEDIA_ROOT + '/' + url
        try:
            img.save(name)
            url = '/static'+name.split('static')[-1]
            return JsonResponse({'success': 1, 'message': '成功', 'url': url})
        except Exception as e:
            return JsonResponse({'success': 0, 'message': '上传失败'})

注意：他这里要的url是从你的项目开始的目录 不要写绝对路径
比如我这里从/static开始就可以了，不然图片显示不出来

5、ok了

到这里 基本上所有功能已经能用了，赶紧把它配置到你的项目中去吧～！

这个插件真的超好用～感谢开源社区