Django集成django-ckeditor富文本编辑器

前置条件安装

安装django-ckeditor扩展包：

pip install django-ckeditor

安装图像处理库Pillow（django-ckeditor的依赖项）：

pip install pillow

Django项目配置

完成安装后，需要对项目进行配置才能让编辑器正常工作。

1. 修改settings.py

将ckeditor和ckeditor_uploader添加到INSTALLED_APPS中：

INSTALLED_APPS = [
    'simpleui',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'content.apps.ContentConfig',
    'teacher.apps.TeacherConfig',
    'ckeditor',
    'ckeditor_uploader',
]

添加媒体文件和上传路径配置：

MEDIA_URL = '/uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
CKEDITOR_UPLOAD_PATH = 'ckeditor_img'

CKEDITOR_UPLOAD_PATH是相对于MEDIA_ROOT的路径，用于存放通过编辑器上传的文件。在开发阶段上述配置足够，但生产环境需要配置STATIC_ROOT并运行collectstatic命令。

2. 配置URL路由

在主urls.py中添加以下路由：

from django.conf.urls import re_path
from django.views.static import serve

re_path('uploads/(?P<path>.*)', serve, {"document_root": MEDIA_ROOT}),
path('ckeditor/', include('ckeditor_uploader.urls')),

在模型中应用编辑器

导入模块

两种编辑器字段选择：

• RichTextField：基础富文本编辑器，无文件上传功能
• RichTextUploadingField：带图片上传功能的富文本编辑器

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

模型定义示例

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = RichTextUploadingField(verbose_name='文章内容')
    created_at = models.DateTimeField(auto_now_add=True)

自定义编辑器工具栏

在settings.py中可以通过CKEDITOR_CONFIGS定制工具栏和编辑器外观：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'height': 300,
        'width': 800,
        'toolbar_Custom': [
            ['Source', 'Bold', 'Italic', 'Underline', 'Blockquote', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor', 'Image', 'Smiley', 'Link', 'Unlink', 'PasteFromWord'],
            ['JustifyCenter', 'JustifyRight', 'JustifyBlock']
        ]
    },
}

常用工具栏按钮说明

• Source：源码编辑
• Bold：加粗
• Italic：斜体
• Underline：下划线
• Image：插入图片
• Link/Unlink：超链接管理
• JustifyCenter/JustifyRight/JustifyBlock：对齐方式
• Font/FontSize：字体和字号选择
• TextColor/BGColor：文字和背景颜色
• NumberedList/BulletedList：有序/无序列表
• Table：插入表格
• Smiley：表情符号
• Maximize：全屏模式

配置完成后，Django管理后台将显示功能完整的富文本编辑器。

前端渲染编辑器内容

在需要使用编辑器内容的模板中，加载CKEditor的JavaScript文件：

<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

为了避免HTML标签被转义显示，需要使用safe过滤器：

{{ article.content|safe }}

或者使用autoescape标签：

{% autoescape off %}
{{ article.content }}
{% endautoescape %}

这样可以正确显示包含格式、图片、链接等元素的富文本内容。