【Django基础】Django使用Markdown 编辑器

使用Markdown 编辑器

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

首先 settings.py 中添加配置，将mdeditor 这个app加进来

INSTALLED_APPS = [
    ... 省略 ...
    'mdeditor',
]

urls.py 中添加path(注意路径不要配错了，前面没有/)

path("mdeditor/", include('mdeditor.urls'))

修改models中的field的类型，之前是TextField，改成MDTextField

from mdeditor.fields import MDTextField

class Article(BaseModel):
    title = models.CharField("标题", max_length=200, editable=True, blank=True)
    body = MDTextField("正文", default="", editable=True, blank=True)

将 Article 在admin中注册后，可以看到如下效果，左边是编辑器，右边是预览，很方便

前端展示处理

先在服务端将markdown渲染成html返回给前端处理

import markdown
 
def detail(request, pk):
    article = get_object_or_404(Article, pk=pk)
    article.body = markdown.markdown(article.body,
                                  extensions=[
                                     'markdown.extensions.extra',
                                     'markdown.extensions.codehilite',
                                     'markdown.extensions.toc',
                                  ])
    return render(request, 'article/detail.html', context={'article': article})

模板代码

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

图片大小控制

默认的图片是 100% 展示的，图片太大了
在网上看到有解说怎么控制图片大小的，上传的时候，在图片格式后面，加上{:width="100%" align=center}
比如：[](http://pxpfco2u1.bkt.clouddn.com/markdown20190921144356.png){:width="100%" align=center}

后端要增加扩展

可以把所有的扩展全部加上。页面布局会变好看很多。这些是从 markdown 的官网扩展官网 https://python-markdown.github.io/extensions/查到的

def bugdetailPage(request):
    bug_name = request.GET.get("bug_name")
    logger.warn(bug_name)
    bug_obj = BugManage.objects.filter(bug_name__exact=bug_name).first()
    # 将markdown语法渲染成html样式
    extensions=[
        # # 包含 缩写、表格等常用扩展
        # 'markdown.extensions.extra',
        # # 语法高亮扩展
        # 'markdown.extensions.codehilite',
        # # 自动生成目录
        # 'markdown.extensions.toc',
        'markdown.extensions.extra',
        'markdown.extensions.abbr',
        'markdown.extensions.attr_list',
        'markdown.extensions.def_list',
        'markdown.extensions.fenced_code',
        'markdown.extensions.footnotes',
        'markdown.extensions.md_in_html',
        'markdown.extensions.tables',
        'markdown.extensions.admonition',
        'markdown.extensions.codehilite',
        'markdown.extensions.legacy_attrs',
        'markdown.extensions.legacy_em',
        'markdown.extensions.meta',
        'markdown.extensions.nl2br',
        'markdown.extensions.sane_lists',
        'markdown.extensions.smarty',
        'markdown.extensions.toc',
        'markdown.extensions.wikilinks'
    ]
    bug_detail = markdown.markdown(bug_obj.bug_detail, extensions=extensions)

    bug_detail = bug_detail.replace('<img alt="" src=', '<img alt="" style="width: 40%;" src=')
    bug_detail = bug_detail.replace('/></p>', '/></p></br>')

    logger.warn(bug_detail)

    result = {'bug_detail': bug_detail}
    # logger.warn(result)
    return render(request, 'ruleroam/bugdetail.html', result)

数据展示

前端的html 中要加入高亮引用

<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="/static/mdeditor/css/markdown_emacs.css">
 <div style="margin-left: 100px">
     {{ bug_detail | safe }}
 </div>

那个 | safe 必须要加，适用于html转义用的
那么高亮引用的文件从哪里来呢，使用这个工具生成。
生成方式：

# 
# pip install markdown #view视图中获取到数据库的数据，修饰为html语句，传到前端
# pip install Pygments #实现代码高亮
# 安装第二个包后还要执行
# pygmentize -S default -f html -a .codehilite > markdown_highlighy.css
# pygmentize -S default -f html -a .codehilite > default.css
# pygmentize -S monokai  -f hl -a .codehilite > monokai.css
# 
# 查看支持的风格
# from pygments.styles import STYLE_MAP
# for key in STYLE_MAP.keys():
#     print(key)
# https://blog.csdn.net/mouday/article/details/83114164
# 
# 在文件夹下会发现生成了code.css文件，将这个css文件加入到你的static文件夹下css里面(路径自己定，只要用的时候引入正确就行了)
# 最后一步在需要高亮的html文件里面导入刚刚生成的css文件，例如我的是->要在
# <link rel="stylesheet" type="text/css" href="{% static 'static/css/markdown_highlighy.css' %}">  {#语法高亮#}