django-ckeditor富文本编辑器

一.安装django-ckeditor

1.安装

pip install django-ckeditor

2.注册应用

INSTALLED_APPS = [
       ...
    'ckeditor',
]

3.配置model

from ckeditor.fields import RichTextField

content = RichTextField()

4.在项目中manage.py文件下重新执行迁移,生成迁移文件

python manage.py makemigrations

python manage.py migrate

5.启动Django项目并且进入刚在所改模型的字段页面中,可以看到有富文本编辑器生成
image

二.添加上传图片功能

1.安装

pip isntall pillow

2.注册应用

'ckeditor_uploader'

3.配置setting

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

# 富文本ckeditor配置
CKEDITOR_UPLOAD_PATH = 'upload/'

CKEDITOR_IMAGE_BACKEND = 'pillow'

4.配置url

path('ckeditor/', include('ckeditor_uploader.urls')),

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

5.配置model(把字段改成RichTextUploadingField)

from ckeditor_uploader.fields import RichTextUploadingField

content = RichTextUploadingField()

相关推荐

  1. Django实现文本编辑器Ckeditor5图片上传功能

    2024-07-17 06:08:02       50 阅读
  2. React文本编辑器wangEditor

    2024-07-17 06:08:02       59 阅读
  3. 前端 文本编辑器原理

    2024-07-17 06:08:02       51 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 06:08:02       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 06:08:02       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 06:08:02       57 阅读
  4. Python语言-面向对象

    2024-07-17 06:08:02       68 阅读

热门阅读

  1. 热修复的原理

    2024-07-17 06:08:02       22 阅读
  2. Springboot 3.x - Reactive programming (2)

    2024-07-17 06:08:02       25 阅读
  3. C++基础语法:STL之容器(1)--容器概述和序列概述

    2024-07-17 06:08:02       31 阅读
  4. 【前端】原生实现图片的放大与缩放

    2024-07-17 06:08:02       22 阅读
  5. Meta Llama - Model Cards & Prompt formats

    2024-07-17 06:08:02       22 阅读
  6. 后端开发面试题

    2024-07-17 06:08:02       22 阅读
  7. 自动化回滚的艺术:Conda包依赖的智能管理策略

    2024-07-17 06:08:02       26 阅读
  8. 探索Dubbo的服务引用:XML配置方式

    2024-07-17 06:08:02       25 阅读
  9. 单例模式 饿汉式和懒汉式的区别

    2024-07-17 06:08:02       22 阅读
  10. 【云原生CI/CD工具GitOps】GitOps工作流程和工具链

    2024-07-17 06:08:02       27 阅读