【开发企业官网】10.使用富文本编辑器

在本节课中，我们将介绍如何有效地运用富文本编辑器。通过富文本，我们能够赋予新闻内容更多样的格式，包括上传图片等功能。现在让我们来了解一下什么是富文本。

01ckeditor

我们经常使用的一个富文本编辑器是 CKEditor。在 CKEditor 的官网上，我们可以看到编辑文字的效果以及富文本编辑器的界面，通过它我们可以设置文本格式，上传图片，插入视频链接等。有了 CKEditor，我们的文章生成将会显得非常美观，不再局限于单纯的纯文本。如下图所示：

02富文本编辑器.jpg

那么，我们该如何在 Django 中使用 CKEditor 呢？首先，我们需要安装一个名为 django-ckeditor 的模块。在vscode终端先关闭服务，然后输入命令进行安装：

pip install django-ckeditor 

安装完成后，我们需要对其进行配置。由于 CKEditor 也是一个应用，所以我们需要在 settings.py 中添加它。我们找到INSTALLED_APP代码块，新增代码如下：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'slide',
    'team',
    'news',
    'mysite',
    'ckeditor',
    'ckeditor_uploader',
]

另外，由于我们要上传图片，我们还需要配置上传路径和图片后端。一般情况下，我们会将上传的图片保存在 upload目录下，并使用 Pillow 模块作为图片后端。在settings.py文件中最后面添加如下代码：

# 配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

配置完成后，我们找到news/models.py文件中需要修改模型以使用 CKEditor。通过导入 RichTextField 和 RichTextUploadingField，我们可以在模型中使用富文本编辑器来替代普通的文本字段。根据需求选择使用上传图片的字段或者普通的富文本字段。修改代码如下：

from django.db import models
from ckeditor.fields import RichTextField  # 富文本编辑器字段
from ckeditor_uploader.fields import RichTextUploadingField  # 富文本上传字段

# 创建模型类
class Category(models.Model):
    id = models.AutoField(primary_key=True)  # 自增主键
    name = models.CharField('分类名称', max_length=20)  # 分类名称字段

    # 元数据
    class Meta:
        db_table = 'category'  # 数据库表名
        verbose_name = '分类管理'  # 在后台显示的名称
        verbose_name_plural = '分类管理'  # 在后台显示的复数名称

    def __str__(self):
        return self.name  # 返回分类名称

# 新闻模型类
class News(models.Model):
    id = models.AutoField(primary_key=True)  # 自增主键
    title = models.CharField('标题', max_length=100)  # 标题字段
    content = RichTextUploadingField()  # 富文本上传字段
    cover = models.ImageField('封面', upload_to='news', blank=True, null=True, help_text='最佳尺寸:480*270')  # 封面图片字段
    created_at = models.DateTimeField('创建时间', auto_now_add=True, editable=True)  # 创建时间字段
    updated_at = models.DateTimeField('更新时间', auto_now=True, editable=True)  # 更新时间字段
    category = models.ForeignKey(Category, on_delete=models.CASCADE)  # 外键关联分类表

    # 元数据
    class Meta:
        db_table = 'news'  # 数据库表名
        verbose_name = '新闻管理'  # 在后台显示的名称
        verbose_name_plural = '新闻管理'  # 在后台显示的复数名称

    def __str__(self):
        return self.title  # 返回新闻标题

接下来，我们需要添加一个路由以处理上传图片的请求。在全局的 urls.py 中引入 CKEditor 的上传路由即可。在config/urls.py文件中找到urlpatterns代码块添加如下代码：

# URL模式列表
urlpatterns = [
    path('', views.index),  # 调用index视图函数
    path('news/', include('news.urls')),  # 包含news应用的URL模式
    path('ckeditor/', include('ckeditor_uploader.urls')),  # 包含CKEditor上传器的URL模式
    path('admin/', admin.site.urls),  # admin管理后台的URL
]

修改完模型后，我们需要生成迁移文件并执行 migrate 命令来应用数据库的更改。然后，我们启动服务，在vscode终端输入如下代码：

python manage.py makemigrations
python manage-py migrate
python manage.py runserver

接下来回到网页端刷新，我们可以在富文本编辑器中编辑文章内容，设置字体、插入表格、插入图片等。如下图示所示：

03富文本编辑页面

我们回到网页中来看一下刚在富文本中已编辑好的SEO网站的基本术语这个新闻页面，如下图所示：

04seo网站的基本属于.jpg

页面没有正常显示是因为django框架自带的安全机制。在前端页面中，我们需要修改模板中的参数以正确显示富文本内容。我们找到templates文件夹的detail.html文件中添加 safe 过滤器，我们可以正常显示富文本内容，并避免 HTML 标签被转义。修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>{{f news.title }} </h2>
    <p>{{ news.created_at }}</p>
    <p>
        {{ news.content|safe}}
    </p>
</body>
</html>

在来刷新页面，我们就可以看到页面上我们之前修改的内容了，如图所示：

05seo基本术语修改.jpg

通过以上步骤，我们成功地在 Django 中添加了富文本编辑功能。这样，我们就可以在编辑新闻时，轻松地进行样式设置、插入图片、表情等操作。这项功能将使我们的文章内容更加丰富多彩，呈现出更加吸引人的形式。