17 博客后台富文本编辑

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

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

1.简单文本编辑

首先打开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。

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

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

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
最后打开全局配置文件settings.py，将语言设置为中文简体。LANGUAGE_CODE = 'zh-Hans’改为zh-hans，如下所示：
```
LANGUAGE_CODE = 'zh-hans'
```

5.添加图片上传功能

安装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文件夹(用于保存需要上传的文件)，如下所示：

配置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 viewsurlpatterns = [# 博客首页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

6.博客后台markdown编辑

博客后台markdown编辑

17 博客后台富文本编辑相关推荐

富文本编辑_博客的后台富文本编辑和阅读计数
哈喽,大家好呀,我是滑稽君.本期我们为博客加上分类统计功能.后台富文本编辑功能.和阅读计数功能.那么我们先说说富文本编辑器是什么. 富文本编辑器,Rich Text Editor, 简称 RTE, 它 ...
记——博客后台管理系统
博客后台管理系统博客后台管理系统背景介绍项目截图部分代码登录主页文章列表评论页个人总结博客后台管理系统背景介绍在学校的时候闲来无事喜欢研究研究技术,对前端开发有浓厚的兴趣,于是 ...
使用react全家桶制作博客后台管理系统
前面的话笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统概述该项目是基于react全家桶(React.React-r ...
简单个人博客系统java web_JavaWeb个人博客项目：手把手教你实现博客后台系统之登录与注册...
JavaWeb个人博客项目:手把手教你实现博客后台系统之登录与注册发布时间:2020-07-17 17:10阅读:( )字号: 大中小后台系统的所有界面图以及之前的准备工作欢迎看我之前的博文& ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
《全栈营销之如何制作个人博客》之二：php环境安装及个人博客后台搭建让你的博客跑起来...
上一节我们讲了个人博客用什么开发语言,用什么CMS系统,从这一节我们就开始真正的干货,这一节我们讨论一下PHP环境的安装,及个人博客后台的搭建,让你的博客在正常的PHP环境中运行起来,你就可以进行后台 ...
node+koa2+mysql搭建博客后台
本文将详细讲解使用node+koa2+mysql搭建博客后台的全过程. 开发环境 node 8.3.0及以上 npm 5.3.0及以上 mysql 5.7.21 具体的环境配置可查看我的上一篇文章准 ...
node mysql和koa_node+koa2+mysql搭建博客后台
本文将详细讲解使用node+koa2+mysql搭建博客后台的全过程. 开发环境 node 8.3.0及以上 npm 5.3.0及以上 mysql 5.7.21 具体的环境配置可查看我的上一篇文章准 ...
JavaWeb个人博客项目：手把手教你实现博客后台系统之管理员管理模块5
上一篇博文介绍了注册和登录模块,未看过的人欢迎翻我之前博文~ 接下来就进入登录成功后的主界面,这里主要实现主界面的基础布局和管理员管理模块=w= GitHub地址:https://github.com ...