17 博客后台富文本编辑

技术交流QQ群:1027579432，欢迎你的加入！

本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！

1.简单文本编辑

使用HTML丰富页面.png

• 首先打开blog文件目录下的templates文件夹下的blog_detail.html模板文件，由于该模板文件可能会执行一些js代码，不是很安全。因此，对当中的{{ blog.content }}模板标签增加一个过滤器{{ blog.content|safe }}，如下所示：

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

• 简单文本编辑：打开http://localhost:8000/admin/网址，对其中的某篇博客内容进行加粗和换行编辑操作。如下所示：

  这是一篇测试博客。<b>Shell</b>是一个用 C 语言编写的程序，它是用户使用 Linux 的桥梁。<br>Shell 既是一种命令语言，又是一种程序设计语言。Shell 是指一种应用程序，这个应用程序提供了一个界面，用户通过这个界面访问操作系统内核的服务。Ken Thompson 的 sh 是第一种 Unix Shell，Windows Explorer 是一个典型的图形界面 Shell。
  

简单文本编辑效果.png
存在的问题.png

• 对博客列表前端页面中出现的问题，打开blog_list.html模板文件，对模板标签{{ blog.content|truncatechars:120 }}修改为{{ blog.content|striptags|truncatechars:120 }}，如下所示：

  <p>{{ blog.content|striptags|truncatechars:120 }}</p>
  

问题已解决.png

2.富文本编辑(使用django-ckeditor)

富文本编辑选取原则.png

3.安装django-ckeditor

• pip install django-ckeditor
• 注册应用：ckeditor
• 配置model:把字段改成RichTextField

4.使用django-ckeditor

• 首先打开全局设置文件settings.py文件，注册django-ckeditor应用。添加如下内容：

  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'blog',
      'ckeditor',
  ]
  

• 接着打开blog文件目录下的models.py文件，将models.TextField()修改为RichTextField()，如下所示：

  from ckeditor.fields import RichTextField
  content = RichTextField()
  

• 进行数据库迁移：python manage.py makemigrations 和 python manage.py migrate

  
  富文本编辑效果展示.png
• 最后打开全局配置文件settings.py，将语言设置为中文简体。LANGUAGE_CODE = 'zh-Hans'改为zh-hans，如下所示：

  LANGUAGE_CODE = 'zh-hans'
  

5.添加图片上传功能

本地图片无法上传.png

• 安装pillow: pip install pillow
• 注册应用： 'ckeditor-uploader'。打开全局配置文件settings.py文件，添加如下内容：

  INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'blog',
      'ckeditor',
      'ckeditor_uploader',
  ]
  

• 在blog应用根目录下创建media文件夹(用于保存需要上传的文件)，如下所示：

  
  创建media文件夹.png
• 配置settings：打开打开全局配置文件settings.py文件，在自定义参数前，添加如下内容：

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

• 配置url:打开mysite文件目录下的urls.py文件，添加与media相关的路由设置，具体如下内容所示：

  from django.contrib import admin
  from django.urls import include, path
  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('blog/', include('blog.urls')),
      path('ckeditor', include('ckeditor_uploader.urls')),
  
  ]
  
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

• 配置models: 把字段修改为RichTextUploadingField，将models.py中的RichTextField()修改为RichTextUploadingField()。如下所示：

  from ckeditor_uploader.fields import RichTextUploadingField
  content = RichTextUploadingField()
  

• 进行数据库迁移：python manage.py makemigrations 和 python manage.py migrate

  
  图片上传效果展示.png

6.博客后台markdown编辑

博客后台markdown编辑