django项目中富文本ckeditor的设置（图片上传、添加代码等功能）

最新推荐文章于 2024-08-13 08:08:31 发布

paul0926

最新推荐文章于 2024-08-13 08:08:31 发布

阅读量9.1k

点赞数 5

分类专栏： Django 文章标签： ckeditor

本文链接：https://blog.csdn.net/paul0926/article/details/93874640

版权

本文介绍了在Django 1.11和Python 3.5环境下，如何集成ckeditor5.7作为富文本编辑器，并处理了ckeditor5.5的一个图片上传bug。内容包括ckeditor的安装、配置、模型字段设置、代码块功能的添加以及代码高亮和行数显示的实现。同时，讨论了自定义编辑器、限制用户上传权限以及在非admin界面使用ckeditor的方法。

摘要由CSDN通过智能技术生成

前文

开发环境：django1.11，python3.5，ckeditor5.7
在运营后台，运营人员需要录入商品并编辑商品的详情信息，而商品的详情信息不是普通的文本，可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带格式的文本，我们引入富文本编辑器。富文本即具备丰富样式格式的文本。
实现的效果，在后台管理界面：
在这里插入图片描述

安装并配置

pip安装

使用pip安装 django-ckeditor 和pillow，pillow用于生成缩略图，用来在编辑器里浏览上传的图片

pip install django-ckeditor
pip install pillow

添加应用：

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

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = ''  # 使用fdfs分布系统

首先将 ‘ckeditor’ 和 'ckeditor_uploader’加入到INSTALLED_APPS中
设置 MEDIA_ROOT 和 MEDIA_URL，CKEDITOR_UPLOAD_PATH =
‘upload/’，图片将上传到项目下的media/upload路径下，图片的url是/media/upload/
这里设置空意思是使用fdfs分布系统设定路径

在项目urls文件添加ckeditor路由

from django.contrib import admin
from django.conf.urls import url, include, static
from django.conf import settings
from rest_framework.documentation import include_docs_urls

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