首页  /  后端技术  /  Django  /  django-admin整合markdown

django-admin整合markdown

 作者:白驹    来源:原创    浏览:352    日期:2020年2月21日  

django安装整合markdown编辑器

django版本2.0+

一、安装
pip install django-mdeditor
pip install markdown
二、使用
#settings.py配置文件中
INSTALLED_APPS = [
    'mdeditor',   # 富文本编辑器mdeditor
]
#markdown文件配置
MEDIA_ROOT = os.path.join(BASE_DIR, UPLOAD_ROOT)  #uploads必须存在,且在项目目录下
MEDIA_URL = '/media/'   #你上传的文件和图片会默认存在/uploads/editor下
#urls.py路由文件中
urlpatterns = [
    ...
    path('mdeditor/', include('mdeditor.urls')),
]
#models.py模型文件中
from django.db import models
from mdeditor.fields import MDTextField

class Article(models.Model):
    content = MDTextField('内容')

    class Meta:
        verbose_name = '文章标题'
        verbose_name_plural = '文章'

    def __str__(self):
        return self.title
#admin.py后台管理文件
from myblog.models import Article
from django.contrib import admin

class ArticleAdmin(admin.ModelAdmin):
    pass
admin.site.register(Article,admin_class=ArticleAdmin)
#这个时候后台已经可以在django-admin后台中正常发布了

django-admin后台中markdown编辑器发布

#视图中调取markdown编辑器发布内容
#views.py模型文件中
from django.shortcuts import render
def show(request,id):
    article = get_object_or_404(Article,pk=id)
    article.content = markdown.markdown(article.content,extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    context = {
        'article':article,
    }
    template = 'myblog/template.html'
    return render(request,template,context=context)
#视图现在也能正常访问了,但是编辑器预览样式和展现效果不相同,这个时候我们需要做进一步的设置
#这里我们分两种情况介绍,django项目在部署之前需要运行:
python manage.py collectstatic
#这个命令运行之后django-admin的静态文件将被迁移到static文件目录下面,我们这里以这个为例其他内容,我将会在其他文章中进行介绍
#这里是我的static目录结构

static目录结构

#这里是我的static目录结构,editormd.css在css文件中
#template.html文件中
<!--Markdown 样式 strat-->
<link rel="stylesheet"  type="text/css" href="{% static 'css/editormd.css' %}">
<!--Markdown 样式js引入 end-->
<div class="content markdown-body">{{ article.content|safe }}</div>

在上面的代码中,我们一定要注意内容显示元素上面一定要加上class="markdown-body"

#至此我们django整合markdown已经完成了。
二、代码高亮
#虽然我们已经完成了django整合markdown但是还有一个问题,我们发现代码没有高亮展示这时候需要执行安装python代码高亮包
pip install Pygments
#然后进入环境中执行如下代码
pygmentize -S default -f html -a .codehilite > code.css
#我的code.css文件存放static下面的css文件中/static/css
#template.html文件中
<!--Markdown 样式 strat-->
<link rel="stylesheet"  type="text/css" href="{% static 'css/editormd.css' %}">
<link rel="stylesheet"  type="text/css" href="{% static 'css/code.css' %}">
<!--Markdown 样式js引入 end-->
<div class="content markdown-body">{{ article.content|safe }}</div>
#至此django整合markdown已经完美处理完成!
  • 评论
  • 相关评论