在Django的admin中使用富文本编辑器 CKEditor

本是古典何须时尚 2022-04-12 21:15 470阅读 0赞

## 开发环境 ： ##

Python 3.5 Django 1.11

## CKEditor安装： ##

pip install django-ckeditor

## Django的settings.py中的注册和配置 ##

*  在INSTALL\_APP进行注册：

> ‘ckeditor’, \# 富文本编辑器  
> ‘ckeditor\_uploader’, \# 富文本编辑器上传图片模块  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5bWFpc3ls_size_16_color_FFFFFF_t_70]

*  增加相关的配置：

# 富文本编辑器ckeditor配置
    CKEDITOR_CONFIGS = {
        'default': {
            'toolbar': 'full',  # 工具条功能
            'height': 300,  # 编辑器高度
            'width': 300,  # 编辑器宽
        },
    }
    CKEDITOR_UPLOAD_PATH = ''  # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写  ' ' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。

CHEDITOR\_UPLOAD\_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，如果使用django自带的存储，那么路径是一个相对路径，它相对与你设置的的MEDIA\_ROOT。

## 关于CKEditor的路由 ##

在主路由 urls.py中 增加如下：

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

## 使用 ##

在需要使用富文本编辑器的models.py中添加如下：

*  ckeditor.fields.RichTextField 不支持上传文件的富文本字段
 *  ckeditor\_uploader.fields.RichTextUploadingField 支持上传文件的富文本字段；

例如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5bWFpc3ls_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5bWFpc3ls_size_16_color_FFFFFF_t_70]: /images/20220413/b65b665e87fa4003860d4e0ebe265497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d5bWFpc3ls_size_16_color_FFFFFF_t_70 1]: /images/20220413/184fe9dab80f44b29aaea327c7b91e78.png