django添加富文本编辑器

最新推荐文章于 2025-06-16 18:44:08 发布

Kevin2312

最新推荐文章于 2025-06-16 18:44:08 发布

阅读量657

点赞数 1

CC 4.0 BY-SA版权

分类专栏： django

本文链接：https://blog.youkuaiyun.com/u012750106/article/details/87865539

django 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在Django项目中集成CKEditor富文本编辑器。首先通过pip安装django-ckeditor，然后在settings.py中注册应用并配置。接着，将模型字段转换为RichTextField，同时安装pillow以支持图片上传。进一步配置settings.py和URL，最终实现富文本编辑器的使用，并展示了编辑器的实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装 pip install django-ckeditor。
在settings.py中注册应用并添加相应配置

INSTALLED_APPS = [
    ...
    'ckeditor',
]

CKEDITOR_CONFIGS = {
    'comment_ckeditor': {
        'toolbar': 'custom',
        'toolbar_custom': [
            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
            ["TextColor", "BGColor", 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Link', 'Unlink'],
            ["Smiley", "SpecialChar", 'Blockquote'],
        ],
        'extraPlugins': 'codesnippet',
        'width': 'auto',
        'height': '180',
        'tabSpaces': 4,
        'removePlugins': 'elementspath',
        'resize_enabled': False,
    },

    'default': {
        'toolbar': 'full',
        'height': 300,
        'width': 'auto',
        'extraPlugins': 'codesnippet',
    },
}

配置model, 把字段改成RichTextField

from ckeditor.fields import RichTextField

class A(model.Model):
    ...
    content = RichTextUploadingField()
    ...

添加上传图片功能，安装pip install pillow
配置settigns.py

INSTALLED_APPS = [
    ...
    'ckeditor',
    'ckeditor_uploader',

]

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

#配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'

配置url

from django.conf import settings
from django.conf.urls.static import static

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

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

效果如图：
在这里插入图片描述