Django-CKEditor富文本编译器相关知识介绍

安装

pip install django-ckeditor

pip install pillow

注册富文本编译器

在settings中的INSTALLED_APPS 代码块中加入ckeditor和ckeditor_uploader(可支持图片上传)

配置富文本编译器

在settings中增加以下代码：

# 指定富文本编辑器或其他上传文件的根目录，这里为/test_blog/media/
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
# MEDIA_URL指定上传图片的路径前缀字符串，即在模板文件中遇到前缀为/media/的URL路径会解析为/test_blog/media/
MEDIA_URL='/media/'
# CKEDITOR_UPLOAD_PATH设置富文本编辑器的上传文件的相对路径
# 它与MEDIA_ROOT组成完整的路径，即/test_blog/media/upload/
CKEDITOR_UPLOAD_PATH='upload'
# 设置图片处理的引擎为pillow，用于生成图片缩略图，在编辑器里浏览上传的图片
CKEDITOR_IMAGE_BACKEND='pillow'

配置URL

在urls中进行修改，首先通过path('ckeditor/',include('ckeditor_uploader.urls'))引入ckeditor的URL配置文件到项目中。

from django.contrib import admin
from django.urls import path,include
from django.conf.urls.static import static
from . import settings
urlpatterns = [
    path('admin/', admin.site.urls),
    path('ckeditor/',include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT) #没有这一行将无法显示上传的图片

上传的图片要存储到media中，因此需要设置media可被访问。在调试模式下增加最后一行代码让django取得MEDIA_ROOT指向的路径。建立MEDIA_URL与MEDIA_ROOT的对应关系，使静态模块为指定静态文件夹提供服务。

其他可选配置

在settings中增加以下几项，对富文本编辑器进行配置：

• CKEDITOR_BROWSE_SHOW_DIRS = True，在编辑器里浏览上传的图片时，图片会以路径分组、以日期排序。
• CKEDITOR_ALLOW_NONIMAGE_FILES=False，不允许非图片文件上传，默认为true
• CKEDITOR_RESTRICT_BY_USER=True，限制用户浏览图片的权限，只能浏览自己上传的图片，图片会传到以用户名命名的文件夹下，但超级用户能查看所有图片。
• 如果想自定义编辑器，添加或删除一些按钮，需要在settings中设置如下：

CKEDITOR_CONFIGS = {
    # 配置名为default时，django-ckeditor默认使用这个配置
    'default':{
        # 使用简体中文
        'language':'zh-cn',
        # 设置富文本编辑器的高度和宽度
        'width':'600px',
        'height':'200px',
        # 设置工具栏为自定义，名字为Custom
        'toolbar':'Custom',
        # 添加富文本编辑器的工具栏上的按钮
        'toolbar_Custom':[
            ['Bold','Italic','Underline'],
            ['NumberedList','BulletedList'],
            ['Image','Link','Unlink'],
            ['Maximize']]}
    # 设置另一个django-ckeditor配置，名为test
    'test':{
        
    }
}

使用非默认配置时，需要在RichTextUploadingField()里指定该配置名称，代码如下：

class Blog(models.Model):
    # 编辑器使用test配置
    body=RichTextUploadingField(config_name='test',verbose_name='文本内容')

Django CKEditor默认只允许Django系统用户(Django Admin管理后台中的登录用户)具有图片上传权限，因此使用图片上传功能需要先登录。还有就是django-ckeditor富文本编辑器一般只在Django Admin管理后台的页面上使用，如果在非管理后台使用要引入相应的JavaScript文件