Django| 给你博客装个Markdown编辑器

2021-07-01 22:05:46

小白学Django系列：

前言

最近自己在开发一个blog，因为比较喜欢用Markdown来写文章，而且目前很多平台都支持Markdown的语法，所以想给blog装个Markdown的编辑器。于是，就搜了一下，发现了django-mdeditor这个库，给大家分享一下。

简单介绍

Github地址:

https://github.com/pylixm/django-mdeditor

Django-mdeditor是基于Editor.md的一个django Markdown 文本编辑插件应用。

Django-mdeditor的灵感参考自项目 django-ckeditor

https://github.com/django-ckeditor/django-ckeditor

后端编辑器使用

1.安装相关库

pip install django-mdeditor  # 用于后台编辑
pip install markdown # 用于前端显示

首先大家先安装这两个库，django-mdeditor库就是用在我们管理后台的md编辑器，markdown则是在前端显示时使用。

2.配置

安装完两个库后，我们需要进行相关的配置。

Django| 给你博客装个Markdown编辑器

新增setting配置：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'mdeditor',
]

除了配置上面的信息，还需要配置资源文件夹：

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/media/editor下

以为就完了？不，你还需要去url进行配置：

Django| 给你博客装个Markdown编辑器

大家把我打红框的代码弄上去就ok了

这时，我们就大概配置完成了。

3.使用Markdown

Django| 给你博客装个Markdown编辑器

此时只需要在model中填写相应的属性，即可调用该编辑器。

当然，在进入管理页面之前，你需要在admin中进行注册

admin.site.register(Acticle) # Acticle 是我文章的model名

打开后台之后，我们就会发现Markdown编辑器出现了：

Django| 给你博客装个Markdown编辑器

我们在这里插入的图片或者上传的文件都会在media文件夹中，这个文件夹在上面配置中提到，必须要有！！！

前端使用

我们使用了Markdown编辑器编写的文章在前端显示时，必须得将Markdown语法“翻译”成富文本的形式，所以这里我们需要使用到markdown这个库。

视图函数

pip install markdown

我们书写的博客文章内容存在Post的body属性里，回到我们的详情页视图函数，对post的body 的值做一下渲染，把Markdown文本转为HTML文本再传递给模板：

import markdown
from django.shortcuts import render, get_object_or_404
from .models import Post
 
def post_article(request, pk):
    post = get_object_or_404(Post, pk=pk)
    # 记得在顶部引入 markdown 模块
    post.body = markdown.markdown(post.body,
                                  extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ])
    return render(request, 'blog/detail.html', context={'post': post})

可能有些朋友不懂get_object_or_404方法，给大家简单介绍一下get_object_or_404：我们原来调用django 的get方法(model.object.get())，如果查询的对象不存在的话，会抛出一个DoesNotExist的异常，现在我们调用django get_object_or_404方法，它会默认的调用django 的get方法，如果查询的对象不存在的话，会抛出一个Http404的异常，我感觉这样对用户比较友好，如果用户查询某个产品不存在的话，我们就显示404的页面给用户，比直接显示异常好。

markdown.extensions.extra： 用于标题、表格、引用这些基本转换

markdown.extensions.codehilite： 用于语法高亮

markdown.extensions.toc： 用于生成目录

替换网页模板

在模板中找到展示博客文章的地方加上如下代码，注意这里需要使用safe过滤器。

<div>
    {{ post.body|safe }}
</div>

通过这样就能够显示md语法的文章了

总结

在开发过程中遇到的一个小需求就分享给大家，当然我介绍的只是mdeditor的一部分知识，mdeditor还有一些相关的配置，这里我就没给大家说了，大家可以去GitHub上自行看他们的官方文档，顺便也可以去star一下！

码农公寓

前言

简单介绍

后端编辑器使用

1.安装相关库

2.配置

3.使用Markdown

前端使用

视图函数

替换网页模板

总结

相关文章