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，打開需要編輯的信息，就是這樣，嘿嘿

這時就可以用富文本編輯器編輯內容了，並且還可以上傳圖片。