11--Django笔记--博客后台富文本编辑

最新推荐文章于 2022-04-24 09:22:51 发布

12218

最新推荐文章于 2022-04-24 09:22:51 发布

阅读量153

点赞数

分类专栏： Django笔记 python 文章标签： django python

本文链接：https://blog.csdn.net/weixin_44338780/article/details/118446031

版权

python 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

Django笔记

16 篇文章 0 订阅

订阅专栏

11–Django笔记–博客后台富文本编辑

一、允许html加载

如果需要让博客文章中的html加载出来，可以使用过滤器，将传入的文章内容标为安全

<!-- blog_detail.html -->
<div class="blog-content">
    {{ blog.content|safe }}
</div>

但是此时，博客列表中的前70个字符的文章内容中，也会显示html的标签，故此需要使用过滤器处理掉

<!-- blog_list.html -->
<p>{{ blog.content|striptags|truncatechars:70 }}</p> <!-- 其中冒号后面的内容表示显示字符长度 -->

11-01

11-02

但是以上这种方法还是会带来编辑困难，因为写博客的时候需要使用html来写

二、使用django-ckeditor

1. 安装django-ckeditor

(study) root@***:~/Program/Django/study/mysite# pip3 install --index https://mirrors.aliyun.com/pypi/simple django-ckeditor

2. 注册应用

在使用之前，还需要进行注册应用

11-03

3. 配置model

把博客内容字段改成 RichTextField

11-04

接着迁移数据库

(study) root@***:~/Program/Django/study/mysite# python3 manage.py makemigrations
Migrations for 'blog':
  blog/migrations/0003_auto_20210703_2136.py
    - Alter field blog_type on blog
    - Alter field content on blog
(study) root@***:~/Program/Django/study/mysite# python3 manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying blog.0003_auto_20210703_2136... OK
(study) root@***:~/Program/Django/study/mysite#

此时再次打开博客编辑页面，就可以看到内容字段可以进行富文本编辑

11-05

4. 添加图片上传功能

但是现在编辑博客页面中的添加图片，只能使用url添加

所以需要添加上传图片的功能

1. 安装pillow

如果不安装这个库，上传图片的过程中可能会出现错误

(study) root@***:~/Program/Django/study/mysite# pip3 install --index https://mirrors.aliyun.com/pypi/simple pillow
Looking in indexes: https://mirrors.aliyun.com/pypi/simple
Collecting pillow
  Downloading https://mirrors.aliyun.com/pypi/packages/d5/21/c700a8ecdf34661defd640d068a9d3a2b2290b07625ab0d82b1c8faa6f92/Pillow-8.3.0-cp38-cp38-manylinux_2_5_x86_64.manylinux1_x86_64.whl (3.0 MB)
     |████████████████████████████████| 3.0 MB 3.8 MB/s 
Installing collected packages: pillow
Successfully installed pillow-8.3.0