Django世界-迈出第八步-富文本编辑器_django老八步-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41515213/article/details/103937763

本文介绍了在Django项目中集成CKEditor和UEditor两种富文本编辑器的详细步骤，包括安装、配置、模型创建、视图处理和模板展示等关键环节，帮助开发者实现富文本内容的编辑和管理。

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

人生最好的三个词

久别重逢、失而复得、虚惊一场。

但却没有「和好如初」。

只因和好容易，如初太难。

CKEditor

django中ckeditor富文本编辑器使用

1. 安装 Ckeditor 和字库

   pip install django-ckeditor
   
　　pip install pillow  //（pillow是python的一个图像处理库）

2. 编辑settings.py 配置文件

INSTALLED_APPS = [
    'ckeditor',#富文本编辑器
    'ckeditor_uploader'#富文本编辑器上传图片模块
]

#媒体文件配置
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "images"  # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写  ' ' ,
#如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。


# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
   
    #（1）默认配置
    # 'default': {
   
    #     'toolbar': 'full',  # 工具条功能
    #     'height': 300,  # 编辑器高度
    #     'width': 800,  # 编辑器宽
    # },

    #（3）自定义配置带代码块显示
    'default': {
   
        'toolbar': (
            ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
            ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor'],
            ['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'],
            ['Blockquote', 'CodeSnippet'],
        ),
        'width': 'auto',
        # 添加按钮在这里
        'toolbar_Custom': [
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet', 'widget', 'lineutils', ]),
    },
}

3. 编辑urls.py路由

from django.conf.urls import url, include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
from editer import views

urlpatterns = [
                  url(r'^admin/', admin.site.urls),
                  url(r'^ckeditor/', include('ckeditor_uploader.urls')),
                  url(r'^index/', views.index),#测试获取后台编辑的内容用的
                  
				## 没有这一句无法显示上传的图片
              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)