django-cheditor后台富文本编辑器

ckeditor富文本编辑器

本次安装环境：

Django==2.2.8
Pillow==9.0.1
django-ckeditor==6.2.0

官方文档 : https://github.com/django-ckeditor/django-ckeditor

安装：pip install django-ckeditor

配置：settings.py中

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

MEDIA_URL = "/media/"
# 项目存储上传文件的根目录【暂时配置】,注意：media目录需要手动创建否则上传文件会报错
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
# media目录下上传图片保存目录
CKEDITOR_UPLOAD_PATH = "goods"



# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
'default': {
# 'toolbar': 'full', # 全部功能
'language':'zh-cn', # 简体中文
'toolbar': 'Custom', # 自定义自己需要的功能
'toolbar_Custom': [
# cke_button__工具名称[注意改成驼峰式写进来]
['Bold', 'Italic', 'Underline',"Image"],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'],
['RemoveFormat', 'Source']
],
'height': 600, # 编辑器高度
},
}

总路由url.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('xadmin/', xadmin.site.urls),
    path('media/(?P<path>.*)$',serve,{"document_root": settings.MEDIA_ROOT}),
    # 上传url
    path('ckeditor/',include('ckeditor_uploader.urls'))

]
# 添加后上传图片功能，才能正常使用
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

模型类添加字段

models.py

from ckeditor_uploader.fields import RichTextUploadingField

# 类中需要用到的字段RichTextUploadingField
...
brief = RichTextUploadingField(max_length=2048, verbose_name="详情介绍", null=True, blank=True)

...