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

ゝ一纸荒年。 2021-09-16 18:18 311阅读 0赞

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

## 1、下载 ##

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

下载下来后目录结构是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70]

## 2、部属 ##

然后我们把它整个拷到我们的项目里面，我这里是放到我的项目下的static目录中的插件目录中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 1]

## 3、配置 ##

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

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

<link rel="stylesheet" href="{% static 'plugins/editor-1.md-master/css/editormd.css' %}"/>
    
    <script src="{% static 'plugins/editor-1.md-master/editormd.js' %}"></script>

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

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

然后我们把urls，view都写一下，运行一下试试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 2]

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

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

## 4、调试 ##

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

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

我打包传到网盘上了 链接:[https://pan.baidu.com/s/1aIBSauBGwEP\_9SmTSi4vnA][https_pan.baidu.com_s_1aIBSauBGwEP_9SmTSi4vnA] 密码:35sp

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 4]

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

到这里 基本上所有功能已经能用了，赶紧把它配置到你的项目中去吧～！![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 5]

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

[editor.md]: http://editor.md
[http_pandao.github.io_editor.md_examples]: http://pandao.github.io/editor.md/examples/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70]: /images/20210913/756c5292aed04858b73efbcefe37b6df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 1]: /images/20210913/5fb2f1936fcf4636ab627beb6e49ae1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 2]: /images/20210913/2c5f7f6da806413ba59055ab3901f8f1.png
[emoji]: /images/20210913/7eb7eac7c5f949feba39ebf65238030d.png
[https_pan.baidu.com_s_1aIBSauBGwEP_9SmTSi4vnA]: https://pan.baidu.com/s/1aIBSauBGwEP_9SmTSi4vnA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 3]: /images/20210913/09ee18fc89b74b79b1bfa1649cb13a71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 4]: /images/20210913/14da7a3ddc524fc7a7274dd3d67720e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjAwNjU2OA_size_27_color_FFFFFF_t_70 5]: /images/20210913/292b99e175684cfeb333f2c962f88e29.png