富文本编辑器Django-ckeditor

富文本编辑器Django-ckeditor

前言

刚开始学习django的时候，在后台编辑数据的时候，总是在想，功能是否太简陋了点，只能做简单的文本编辑，所以在这里记录一个富文本编辑器Django-ckeditor。

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

　　

使用

1.安装jango-ckeditor

pip install django-ckeditor

　　

2.注册ckeditor应用

在settings.py文件的INSTALLED_APPS下加入

 'ckeditor',

INSTALLED_APPS = [
    # ...
    'ckeditor',
]

3.配置model

在model.py文件下

包导入
1.from ckeditor.fields import RichTextField

将数据显示字段替换为RichTextField
2.content=RichTextField()

其中，title是博客标题，content是博客内容。博客内容需要富文本编辑，则改成如下：
from django.db import models
from ckeditor.fields import RichTextField

class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextField()

4.数据库

python manage.py makemigrations
python manage.py migrate

　　

添加文件上传功能

一些常用的功能我们可以在菜单栏使用，但是图片上传功能的没有的，我们还需要配置

点击菜单栏的图片这个图标，里面没有图片上传的功能

现在我们来添加这个功能

1.安装

pip install pillow

　　

2.注册应用(配置app)

'ckeditor_uploader',

INSTALLED_APPS = [
    # ...
    'ckeditor',
    'ckeditor_uploader',
]

3.配置settings

1.先在项目根目录下创建media目录

2.配置上传路径、设置文件上传静态目录
MEDIA_URL="/media/"
MEDIA_ROOT=os.path.join(BASE_DIR, 'media')
CKEDITOR_UPLOAD_PATH="upload/"
#配置上传的路径：
#当文件第一次上传到服务器，会自动在media目录下创建一个文件夹upload用来保存文件

　　

使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。打开settings.py添加如下设置：
MEDIA_URL = '/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

CKEDITOR_UPLOAD_PATH = 'upload/'

4.配置url

from django.conf import settings
from.conf.urls.static import static
from django.urls import include,path

path('ckeditor',include('ckeditor_uploader.urls'))

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

　　

5.配置model

from ckeditor_uploader.fields import RichTextUploadingField
把数据字段改成RichTextUploadingField

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField

class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextUploadingField()

　

6.数据库

python manage.py makemigrations
python manage.py migrate

　

现在就有图片上传的功能　

我们选择一张图片进行上传，点击上传 

 服务端接收到图片

最后在浏览器显示图片