在django里使用Markdown编辑器详解(一)


发布时间:2019-04-09 17:11    作者: Uncle Hui   已过去:1 年   阅读总量:695 已被赞:0


通过前面两篇文章的学习,我基本上理解和掌握了这种国人开发的编辑器的基本使用过程,今天将通过本文来完整实现该编辑器在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里

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

点赞

0




登陆后方可评论