admin后台富文本输入框美化

平时在django博客后台发表文章时候,我们看到的后台管理都是默认的,特别是写文章时候正文内容是普通的文本框。有时候我们需要对文章内容做出各种格式的调整,因此现在我们考虑如何改造文本输入框,把普通的文本框改为富文本编辑。

安装前:

安装后:

1.富文本输入框的实现本文依赖 django-summernote 这个库来实现,首先安装

pip install django-summernote

2.修改settings.py注册应用:

djangoblog/settings.py

INSTALLED_APPS = [
    ......
    'haystack',
    'django_summernote'
]

3.修改urls.py添加路由:

djangoblog/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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('blog.urls')),
    path('search/', include('haystack.urls')),
    path('summernote/', include('django_summernote.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

4.添加附件(如图片、视频、文件等)的存放路径,修改settings.py,添加如下代码:

djangoblog/settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

5.修改admin.py,为Article模型中正文字段添加富文本编辑器:

blog/admin.py

from django.contrib import admin
from .models import Post, Category, Tag
from django_summernote.admin import SummernoteModelAdmin

class PostAdmin(SummernoteModelAdmin):
	summernote_fields = ('body',)  # 给body字段添加富文本
	list_display = ['title', 'zid','created_time', 'modified_time', 'category', 'author']

# 把新增的 PostAdmin 也注册进来
admin.site.register(Post, PostAdmin)
admin.site.register(Category)
admin.site.register(Tag)

6.执行python manage.py makemigrations命令使附件模型生效:

python manage.py makemigrations

至此,登录后台发文时正文输入框已经是富文本输入框了。

 

但这时候还会有另一个问题的出现,我们在输入框使用了各种样式编写文章,但是文章实际预览的效果如下:

没有过滤html标签文章:

下面我们解决这个问题:

safe 标签

我们在发布的文章详情页没有看到预期的效果,而是类似于一堆乱码一样的 HTML 标签,这些标签本应该在浏览器显示它本身的格式,但是 Django 出于安全方面的考虑,任何的 HTML 代码在 Django 的模板中都会被转义(即显示原始的 HTML 代码,而不是经浏览器渲染后的格式)。为了解除转义,只需在模板标签使用 safe 过滤器即可,告诉 Django,这段文本是安全的,你什么也不用做。在模板中找到展示博客文章主体的 {{ post.body }} 部分,为其加上 safe 过滤器,{{ post.body|safe }},大功告成,这下看到预期效果了。

safe 是 Django 模板系统中的过滤器(Filter),可以简单地把它看成是一种函数,其作用是作用于模板变量,将模板变量的值变为经过滤器处理过后的值。例如这里 {{ post.body|safe }},本来 {{ post.body }} 经模板系统渲染后应该显示 body 本身的值,但是在后面加上 safe 过滤器后,渲染的值不再是 body 本身的值,而是由 safe 函数处理后返回的值。过滤器的用法是在模板变量后加一个 | 管道符号,再加上过滤器的名称。可以连续使用多个过滤器,例如 {{ var|filter1|filter2 }}