Django admin配置django-ckeditor

对于内容管理系统而言，富文本编辑器是必不可少的功能组件，在Django自带的管理后台admin中，我们可以使用ckeditor，Django有相关的插件（django-ckeditor）可以帮助我们快速的配置完成并使用。

我在这里举一个小例子来完成django-ckeditor的安装配置，在Django后台admin中实现富文本编辑器的功能，包含图片的上传。

例子：数据库中有一张存放用户个人信息的数据表，其中有一个字段是用来描述用户简历的，我们需要将简历的这个字段用富文本编辑器来编辑（用户直接用富文本编辑器写简历然后发布到网上）。

数据表结构如下：

这是用来存放用户信息的数据表结构，如果需要在admin中编辑用户信息，还需要配置admin，由于这不是该篇博客的重点，我就直接贴出来：

这样其实就可以在admin显示基础信息了，

但是我们现在需要将简历这个字段改成用富文本编辑器编辑，那么我们接下来进行配置：

首先需要安装django-ckeditor

pip install django-ckeditor==5.7.1

如果没有指定版本号会默认安装最新版本

安装完成后再去配置settings.py文件中的INSTALLED_APPS，加入'ckeditor', 'ckeditor_uploader'

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'my_info',

    'ckeditor',
    'ckeditor_uploader',
]

然后再在settings.py文件中加入ckeditor的配置

# 配置CKEditor
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具栏
        'height': 300,  # 高度，单位是px
        'width': 800,  # 宽度，单位是px
        'tabSpaces': 4,  # 左缩进
        'extraPlugins': 'codesnippet',  # 配置代码插件
    },
}

还需在settings.py中配置

MEDIA_ROOT = os.path.join(BASE_DIR, 'static/media')

MEDIA_URL = '/media/'

CKEDITOR_UPLOAD_PATH = "my_info_images"

app下面的adminforms.py中

class MyInfoAdminForm(forms.ModelForm):
    resume = forms.CharField(widget=CKEditorUploadingWidget(), label='简历', required=False)

修改urls.py

urlpatterns = [
    path('admin/', admin.site.urls),

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

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

配置完成后，启动程序，进入admin，打开需要编辑的信息，就是这样，嘿嘿

这时就可以用富文本编辑器编辑内容了，并且还可以上传图片。