在django里使用Markdown编辑器详解（一）


发布时间：2019-04-09 17:11    作者： 晖哥哥   已过去：3 年，11 月   阅读总量：3376 已被赞：2

通过前面两篇文章的学习，我基本上理解和掌握了这种国人开发的编辑器的基本使用过程，今天将通过本文来完整实现该编辑器在django项目中完整过程。

一、Markdown和editor.md简介：
Markdown在技术圈里（估计更多是程序猿吧）越来越流行。简单的语法，统一的格式，使用过程中，手基本上不用从键盘上移到鼠标上去，超级方便。写好了一篇md文档(也就是含Markdown语法格式的普通TXT文件)，可以随意放到别的支持Markdown格式的网站上发布。

editor.md是国内开源的一款在线Markdown编辑器，单纯基于前端JavaScript实现，和后端什么语言无关。这个还可以画流程图，以及数学公式。官网Demo示例使用的是PHP语言，我这是基于python+django2.0。

如下记录我的使用过程。

二、安装

下载：我们可以从其官网中找到下载最新版：   

http://pandao.github.io/editor.md/examples/index.html

放进项目：我们将下载文件解压后，放到static下就可以了，文件名取名editor.md,（文件里有些是多余的部分，请自行百度删除）

三、开始使用

3.1 编辑页面的使用：

3.1.1 引入，请结合项目实际路径，引入这些，确保有jq

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

我的使用：我新建了一个fabu.html文件，里面代码下：

{% extends 'base1.html' %}
{% load static %}
{% block head %}
<link rel="stylesheet" href="{% static 'editor.md/css/editormd.min.css' %}">
<script src="{% static 'editor.md/editormd.min.js' %}"></script>
{% endblock %}
{% block main %}
<div id="my-editormd">
</div>
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd("my-editormd", {
            width: "98%",
            height: 730,
            syncScrolling: "single",
            path: "{% static 'editor.md/lib/' %}",//要和自己实际的项目中路径一致
            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 : "{% url 'blog:blogimg' %}",//你后端的上传图片服务处理地址
            onload: function(){
                this.width("100%");
                this.height(480);
            },
            {#/**设置主题颜色 把这些注释去掉主题就是黑色的了*/#}
             {#editorTheme: "pastel-on-dark",#}
             {#theme: "dark",#}
              {#previewTheme: "dark"#}
        });
    });
</script>
{% endblock %}

 3.1.2 写一个视图函数，并映射一个URL

我是这样：views.py

def fabu(request):
    return render(request,'fabu.html')

 URL：

path('fabu/f/',fabu), #文章发布

我们启动，来看看效果：

看见这个页面我们就成功一半了，然后我们看看表情的使用，我们发现标签不能使用，这是因为这个编辑器是通过在线获取表情的，而这个网站已经访问不了，我们就自己把标签下载下来，放到editor.md这个目录下就可以了。

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

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

接下来我们来修改相关JS

我们要打开editormd.js文件，注意 是之前导入过的那个editormd.js文件。
然后我们搜索editormd.emoji字段
找到这个地方的path
把原来的路径改成我们本地的路径

这样我们就可以使用表情包了。

3.2.3 我们来使用图片上传功能。

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

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

data = request.FILES['editormd-image-file'] 获取到图片

我是这样写的后端代码：

我新建了一个处理上传图片的方法，在media下新建了一个叫bloging的文件夹，用于存储全部的文件

from django.http import JsonResponse
import os,random
from blog2019_vip import settings
from PIL import Image
#mardown编辑器editor.md图片处理函数
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 = '/media'+name.split('media')[-1]
            return JsonResponse({'success': 1, 'message': '成功', 'url': url})
        except Exception as e:
            return JsonResponse({'success': 0, 'message': '上传失败'})

url:

path('blogimg/f/f/',blog_img_upload,name='blogimg'), #文章图片上传

这样图片就能上传成功了？我们先去关闭CRSF保护，它在settings.py里

然后，我们发现我们真的能够上传成功了，下篇文章继续吧。 

点赞

2


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐