Django rich text CKEditor upload pictures

CKEditor installation

In the corresponding virtual environment download

pip install django-ckeditor
pip install pillow

In settings.py configuration

INSTALLED_APPS = [
    'ckeditor', # 将django-ckeditor 注册到该列表中
    'ckeditor_uploader', # 富文本编译器上传图片的模块
]

# ckeditor 富文本编译器
CKEDITOR_CONFIGS = {
    # 将这份配置命名为 my_config
    'my_config':  {
        'toolbar': 'full',  # 工具条功能
        'height': 300,  # 编辑器高度
        'width': 800,  # 编辑器宽
    },
}

CKEDITOR_UPLOAD_PATH = '' 
# 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写  '' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。

# MEDIA_URL = '/media/'
# # 放在django项目根目录，同时也需要创建media文件夹
# MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

Note: CKEDITOR_UPLOAD_PATH This parameter is the path to save the uploaded pictures, if the picture does not store or use custom storage location, directly write '', if you are using storage django itself, then you can name a directory to store.

CKEditor router settings

In urls.py primary router added:

If you are using storage django itself:

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

urlpatterns = [
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

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

If you do not store or use a custom picture storage location:

urlpatterns = [
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

application

In models.py using the following files:

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

# 博客模型
class Blog(models.Model):
    title = models.CharField(max_length=50)
    # 博客的内容为　RichTextField 对象
    body = RichTextUploadingField(config_name='my_config')

    def __str__(self):
        return self.title
  

Description:

• ckeditor.fields.RichTextField does not support rich text file upload field
• ckeditor_uploader.fields.RichTextUploadingField supports uploading files rich text field

Renderings: