从零开始的django开发生活之博客后台富文本编辑（11）

十一、博客后台富文本编辑

1、使用html丰富页面

我们进入后台页面，进入编辑框编辑，直接加入HTML代码不会有任何效果

我们只要到blog_detail.html中将{{ blog.content }}中内容改为{{ blog.content|safe }}就可以显示

但是在博客列表页面html的标签仍然存在

我们要在blog_list.html中将{{ blog.content|truncatechars:120 }}改为

{{blog.created_time|date:“Y-m-d”}}就可以去掉标签

2、富文本编辑

前面那种方法比较麻烦，我们自己可以实现富文本编辑功能，它最终也会解析成html，分为两种，富文本编辑器和markdown编辑器

这里以富文本编辑器django-ckeditor为例：

选择标准：

• 具有基本的富文本编辑功能
• 可以上传图片
• 可以查看源码
• 有持续更新（维护）

1）安装

pip install django-ckeditor

2）注册应用

‘ckeditor’

settings.py中注册app

3）配置model

把字段改成Rich TextField

models.py导入 from ckeditor.fields import RichTextField，将content的字段类型改为 content = RichTextField()

4）数据迁移

python manage.py makemigrations

python manage.py migrate

编辑器中的文字为繁体，这是因为编辑器没有识别zh-Hans,必须改为小写zh-hans

编辑器中图片上传只能通过URL链接，很不方便，所以下面添加上传图片功能

3、图片上传功能

1）、安装

pip install pillow

2)、注册应用

‘ckeditor_uploader’

settings.py–>INSTALLED_APPS添加应用

3)、配置settings

settings.py中写入

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

#配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'

配置完成后在项目根目录创建一个media文件夹，最终文件会保存在这个文件夹中的upload文件夹中

4）、配置url

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('', views.home, name='home'),
    path('admin/', admin.site.urls),
    path('ckeditor', include('ckeditor_uploader.urls')),
    path('blog/', include('blog.urls')),
]

urlpatterns +=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

这次配置都是规定好的，详情请阅读具体文档链接

5）、配置model

把字段改为RichTextUploadingField

将原本的 from ckeditor.fields import RichTextField改为

from ckeditor_uploader.fields import RichTextUploadingField

将content的字段类型改为 `content = RichTextUploadingField()

6）数据迁移

python manage.py makemigrations

python manage.py migrate

进入后台查看：

可以看到已经有了上传图片功能