【Django2.0学习笔记】17.博客后台富文本编辑

17、博客后台富文本编辑

1、使用html丰富页面

• 简单文本编辑——直接贴入html代码
• 富文本编辑——最终解析成html——富文本编辑器、markdown编辑器
  

（1）简单文本编辑——>直接贴入html代码
打开blog_detail.html，输入{{ blog.content }}那里加一个safe过滤器{{ blog.content | safe }}，然后在后台中修改博客内容如下：

然后访问该博客的详细页面，可以看到已经实现了加粗和换行的效果

但是在博客列表页面，还是有显示标签内容，我们需要把这个过滤掉

打开blog_list.html，在代码{{ blog.content | truncatechars:120}}地方，加上一个striptags标签，改为{{ blog.content | striptags | truncatechars:120}}

（2）富文本编辑

2、使用django-ckeditor

选择标准：

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

3、安装django-ckeditor

• 1、安装：pip install django-ckeditor
• 2、注册应用：'ckeditor'
• 3、配置model：把字段改成RichTextField
  

在命令行输入pip install django-ckeditor安装，

然后在项目的settings.py中的INSTALLED_APPS里面添加ckeditor,

接着打开models.py，修改代码如下：

4、添加上传图片功能

• 1、安装：pip install pillow
• 2、注册应用：'ckeditor_uploader'
• 3、配置settings
• 4、配置url
• 5、配置model：把字段改成RichTextUploadingField
  

1、安装：pip install pillow
在命令行输入pip install pillow安装
【遇到的问题】pip install 安装时一直出现read timed out问题
【解决方案】换源就好了，在install 后加上-i https://pypi.douban.com/simple或者-i http://pypi.douban.com/simple --trusted-host pypi.douban.com豆瓣源

2、注册应用：'ckeditor_uploader'
在settings.py中添加如下代码：

3、配置settings，settings.py中添加代码如下：

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

# 配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'

4、配置url
在项目根目录下新建media文件夹（那么上传的文件会保存到meida文件夹里面）

配置总的urls.py，在mysite/urls.py中添加代码如下：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('ckeditor', include('ckeditor_uploader.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

这些相关的设置都可以在http://pypi.python.org页面找到，搜索“django-ckeditor”，然后在ckeditor页面搜索“path”或“url”

5、配置model：把字段改成RichTextUploadingField
修改blog\models.py如下：

from ckeditor_uploader.fields import RichTextUploadingField

content = RichTextUploadingField()

刷新页面，再点击上传图片，可以看到已经有上传的功能了

再访问该博客详情页面