ckeditor的快速使用(django)

0. ckeditor介绍:

用了它，腰不痛，腿不酸了，一口气上三层楼，开个玩笑。

这个富文本编辑主要用于后端，可以让图片展示出来，效果如下(注意:我现在所在的位置，是后端用admin/xadmin上传数据的时候的场景)：

使用配置一下django上传的图片功能

django-图片上传的配置https://blog.csdn.net/qq_52385631/article/details/122762006?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164415455416780366593136%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164415455416780366593136&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-2-122762006.nonecase&utm_term=%E5%9B%BE%E7%89%87&spm=1018.2226.3001.4450

1. 安装

pip install django-ckeditor

2. 添加应用

INSTALLED_APPS = [
    ...
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 富文本编辑器上传图片模块
    ...
]

3. 添加CKEditor设置

CKEDITOR_UPLOAD_PATH = ''  # 上传图片保存路径，留空则调用django的文件上传功能(media的路径),所以才让提前配置一下django的图片上传功能

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能,full表示全部，Basic表示基本功能，功能少很多，还有个Custom自定义功能选项
        'height': 300,      # 编辑器高度
        # 'width': 300,     # 编辑器宽
    },
}
CKEDITOR_UPLOAD_PATH = ''  # 上传图片保存路径，留空则调用django的文件上传功能(media的路径)

#自定义(一般，自带的功能就够用了)
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline','Image'],  #通过浏览器f12来查看每个功能的标签，就看到了类值cke_button_工具名称[注意使用驼峰式来写]
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink'],
            ['RemoveFormat', 'Source']
        ]
    }
}

4. 添加ckeditor路由

re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),

5.model的字段配置

from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
    """
    专题课程
    """
	...
    
    desc= RichTextUploadingField(max_length=2048, verbose_name="课程概述", null=True, blank=True)