Django 中集成 CKEditor 富文本编辑器详解

概要

在 Web 应用中，富文本编辑器是提高用户体验的重要组件之一。CKEditor 是一款流行的、功能丰富的富文本编辑器。在 Django 项目中集成 CKEditor 不仅可以提升内容编辑的灵活性，还能丰富用户的互动体验。本文将详细介绍如何在 Django 中集成和配置 CKEditor，包括安装、模型和表单的配置、以及自定义编辑器的设置。

CKEditor 简介

CKEditor 的功能和优势

CKEditor 是一款功能丰富的 WYSIWYG（所见即所得）编辑器，支持文本格式化、图像上传、HTML 内容编辑等功能。

安装和配置 CKEditor

在 Django 项目中安装 CKEditor

使用 pip 安装 Django CKEditor 包。

pip install django-ckeditor

在 Django 设置中配置 CKEditor

在 settings.py 文件中添加 CKEditor 到已安装的应用列表。

# settings.py
INSTALLED_APPS = [
    # ...
    'ckeditor',
    # ...
]

在模型中使用 CKEditor

更新 Django 模型以使用 CKEditor

在你的模型中，使用 CKEditor 提供的字段类型。

# models.py
from django.db import models
from ckeditor.fields import RichTextField

class MyModel(models.Model):
    content = RichTextField()

在 Django 管理界面中使用 CKEditor

配置 Django Admin 使用 CKEditor

在 Django 管理界面中配置模型以使用 CKEditor。

# admin.py
from django.contrib import admin
from .models import MyModel
from ckeditor.widgets import CKEditorWidget
from django import forms

class MyModelAdminForm(forms.ModelForm):
    content = forms.CharField(widget=CKEditorWidget())

    class Meta:
        model = MyModel
        fields = '__all__'

class MyModelAdmin(admin.ModelAdmin):
    form = MyModelAdminForm

admin.site.register(MyModel, MyModelAdmin)

CKEditor 的自定义和高级配置

自定义 CKEditor 工具栏

可以通过设置自定义配置来改变工具栏的布局和功能。

# settings.py
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline'],
            ['Link', 'Unlink'],
            ['RemoveFormat', 'Source']
        ]
    }
}

使用 CKEditor 上传图片

配置 ckeditor_uploader 来使用图片上传功能。

# settings.py
INSTALLED_APPS = [
    # ...
    'ckeditor_uploader',
    # ...
]

CKEDITOR_UPLOAD_PATH = "uploads/"

# urls.py
urlpatterns = [
    # ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
    # ...
]