MENU

使用mdeditor模块

  • 安装pip install mdeditor

  • 在settings.py中配置

INSTALLED_APPS = [
    '...',
    # 添加app
    'mdeditor',
]

# media 保存上传的文件
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
  • 创建文件夹 uploads/editor
  • url.py添加路径
from django.conf.urls import url, include

urlpatterns += [
    url(r'mdeditor/', include('mdeditor.urls'))
]
  • 使用models.py
from mdeditor.fields import MDTextField

class Blog(models.Model):
    # ...
    content = MDTextField()
  • 收集静态文件python manage.py collectstatic

这时会在static文件夹生成相应的css和js文件,下面会使用到。

这样我们就可以在后端使用markdown编辑器写文章了

在前端渲染markdwon文档

我们在markdown编辑器中使用markdown语法编写文档之后,存储到数据库中的是markdown语法的文本,不能直接输出到前端页面,这时候就需要使用另一个模块markdown。

  • 安装pip install markdown

  • 在views.py中处理markdown

import markdown
# 在视图中对相应的markdown内容进行处理
content = markdown.markdown(content,
                extensions=[
                    'markdown.extensions.extra',
                    'markdown.extensions.codehilite',
                    'markdown.extensions.toc',
                ])

在前端模板使用过滤器{{ content|safe }}

但是这样也是不能看出效果的 ,还需要引入css文件

<link rel="stylesheet" type="text/css" href="{% static 'css/editormd.css' %}">

以及js文件

<script src="https://cdn.bootcss.com/marked/0.5.1/marked.min.js"></script>
<script src="{% static 'js/editormd.min.js' %}"></script>

同时,需要添加类名markdown-body

其中有几个扩展

  • 代码高亮 codehilite

要实现代码高亮,还需要安装模块Pygments

pip install pygments

生成css样式文件

使用命令pygmentize -S default -f html -a .codehilite > code.css

这样,在当前路径下会生成code.css文件,我们需要将其引入到html中

<script src="{% static 'css/code.css' %}"></script>
  • 其他扩展还在摸索中,如流程图,甘特图等以及如何自动生成文档标题...

自动生成标题可参考:这篇文章

到此,我们就基本实现了在django中使用markdown编辑器和进行前端渲染。

参考文献:

  1. Django+Markdown+Pygments 支持Markdown 实现代码高亮

  2. Django 博客开发教程 9 - 支持 Markdown 语法和代码高亮

  3. https://python-markdown.github.io/extensions/