Django2.0中使用MrakDown编辑器并在前端显示

Django2.0中使用MrakDown编辑器并在前端显示

前言

在使用Django的过程中,有一个使用文本编辑器的需求,原本使用的是富文本编辑器django-ckeditor但是它不是MarkDown编辑器,经过一翻寻找我找到了Editor.Md这个项目,这是一款优秀的MrakDown编辑器,并且有人贴心得把它移植到了Django上,下面我记载一下使用方法

本文所用的操作系统为Deepin 15.8

Python版本:Python 3.6.5

Django版本:2.0

添加编辑器到后台

首先我们需要安装编辑器,这个编辑器在GitHub的地址是:django-mdeditor

  1. 安装django-mdeditor:

    sudo pip3 install django-mdeditor
  2. 然后在项目目录的settings.py加入:

    INSTALLED_APPS = [
          ...
          'mdeditor',
    ]
  3. 添加媒体路径到设置中:

    MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
    MEDIA_URL = '/media/'
  4. 在项目的urls.py中加入:

    from django.contrib import admin
    from django.urls import path, include
    from django.conf import settings
    from django.conf.urls.static import static
    from . import views
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('blog/', include('blog.urls')),
        path('mdeditor/', include('mdeditor.urls')),
    ]
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    
  5. 添加一个博客APP:

    此过程不表,假设你已经创建好一个博客app,并且在admin.py注册了model,在models.py中添加:

    from django.db import models
    from mdeditor.fields import MDTextField
    
    class Blog(models.Model, ReadNumExpandMethod):
        title = models.CharField(max_length=50)  
        content = MDTextField()  # 类型为编辑器提供的字段

    然后运行:

    python3 manage.py makemigrations
    python3 manage.py migrate

此时打开我们的后台,应该已经可以看到效果了:

前端渲染

此时,后台虽然已经有了MarkDown编辑器,但是在前端并没有展示出来,我们需要用一些方法在前端显示.

首先需要安装一个第三方库:

pip3 install markdown

此时我们已经在models.py里面注册了这个子段,我们需要在views.py中显示出来,我是返回了一个字典,读者可以根据自己的需要,找到具体的内容,调用markdown方法来解析成html返回给前端:

blog/views.py

import markdown
from django.shortcuts import render_to_response, get_object_or_404

def blog_detail(request, blog_pk):  # 博客内容
    context = {}
    context['blog'] = get_object_or_404(Blog, id=blog_pk)
    context['blog'].content = markdown.markdown(context['blog'].content,
                                                extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    response = render_to_response("blog/blog_detail.html", context)  
    return response

这样我们在模板中展示 {{ blog.content }} 的时候,就不再是原始的 Markdown 文本了,而是渲染过后的 HTML 文本。注意这里我们给 markdown 渲染函数传递了额外的参数 extensions,它是对 Markdown 语法的拓展,这里我们使用了三个拓展,分别是 extra、codehilite、toc。extra 本身包含很多拓展,而 codehilite 是语法高亮拓展,这为我们后面的实现代码高亮功能提供基础.

在前端调用的时候,此时支持显示纯粹的html代码,我们需要在前端解析html,可以这样:

在对应模型标签中填入{{ blog.content|safe }}即可.

此时效果为:

接下来有代码高亮的环节,这些内容不在本文讨论范围之内,请自行搜索.

参考博客

  1. Django2.0整合markdown编辑器
  2. 支持 Markdown 语法和代码高亮
最后修改:2018 年 12 月 31 日 05 : 27 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论