CKEditor在Python生态中最成熟的集成方案是django-ckeditor，它让Django后台直接获得富文本编辑能力，而Flask等框架则需借助社区扩展或自行集成。
CKEditor Django配置：从安装到自定义
在Django项目中使用CKEditor,推荐通过django-ckeditor库实现，这个库封装了CKEditor的JS文件，并提供了模型字段类RichTextField，让集成变得简单。
安装与基础配置
确保你的Django项目环境已激活,运行以下命令安装django-ckeditor：
pip install django-ckeditor
安装完成后,在settings.py的INSTALLED_APPS中添加'ckeditor'：
INSTALLED_APPS = [
...
'ckeditor',
]
配置媒体文件相关设置,上传的图片需要存储，所以需要设置MEDIA_URL和MEDIA_ROOT：
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
在项目主urls.py中添加媒体文件的路由（仅开发环境）：
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
在模型中使用RichTextField代替TextField：
from ckeditor.fields import RichTextField
class Article(models.Model):
content = RichTextField(verbose_name='内容')
运行迁移,你的模型就拥有了富文本编辑能力。
自定义工具栏与样式
django-ckeditor允许你自定义工具栏按钮和编辑器样式，在settings.py中添加CKEDITOR_CONFIGS字典：
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'height': 300,
'width': 800,
'extraPlugins': ','.join(['codesnippet', 'image2']),
},
}
你可以根据需求选择预设工具栏,如'basic'、'full'等，或自定义toolbar列表，只保留常用功能：
'toolbar': [
['Bold', 'Italic', 'Underline'],
['NumberedList', 'BulletedList'],
['Link', 'Unlink'],
['Image', 'Table'],
],
如果需要更精细的控制,还可以定义toolbarGroups，按组排列按钮。extraPlugins参数可以加载额外插件，如代码高亮、数学公式等。
文件上传与安全
django-ckeditor自带文件上传功能，但需要配置CKEDITOR_UPLOAD_PATH，这个路径是相对于MEDIA_ROOT的子目录：
CKEDITOR_UPLOAD_PATH = 'uploads/'
上传视图会自动处理,但需要注意：确保你的项目已配置CSRF保护，并且上传的文件类型做了限制，默认情况下，django-ckeditor只允许上传常见图片类型，但你可以通过CKEDITOR_ALLOWED_CONTENT_TYPES进一步控制。
业内专家指出,在部署到生产环境时，应使用安全的文件存储后端，如云存储服务，以避免本地磁盘风险，建议对上传文件进行大小限制，防止恶意大文件攻击。
CKEditor Python图片上传的五种实现方式
图片上传是富文本编辑器最常用的功能之一,在Python项目中，实现CKEditor图片上传有多种方式，下面介绍五种常见方案。
使用django-ckeditor自带上传
对于Django项目,最简单的方法就是配置CKEDITOR_UPLOAD_PATH，如上文所述，django-ckeditor会自动处理上传，并将图片路径插入到内容中，这种方式适合小型项目，无需额外编码。
自定义上传视图
如果你需要更精细的控制,比如图片压缩、水印或权限检查，可以自己编写上传视图，在Django中，创建一个视图接收CKEditor的POST请求，保存文件，返回JSON：
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def upload_image(request):
if request.method == 'POST' and request.FILES.get('upload'):
image = request.FILES['upload']
# 处理图片，如压缩、生成缩略图
from PIL import Image
img = Image.open(image)
img.thumbnail((800, 800))
# 保存到媒体目录
path = default_storage.save('ckeditor/' + image.name, ContentFile(''))
img.save(path)
url = default_storage.url(path)
return JsonResponse({'url': url, 'uploaded': '1'})
return JsonResponse({'error': '上传失败'})
然后在CKEditor配置中设置filebrowserUploadUrl指向该视图。
集成云存储
对于大型项目,使用云存储（如简米云OSS、酷番云COS）是更好的选择，你可以使用django-storages配合django-ckeditor，配置DEFAULT_FILE_STORAGE为云存储后端，CKEDITOR_UPLOAD_PATH仍然有效，文件会自动上传到云端。
据统计,超过60%的国内Python项目选择使用云存储来管理CKEditor上传的图片，以降低服务器压力，具体配置步骤：
- 安装django-storages和对应云存储SDK
- 在settings.py中设置
DEFAULT_FILE_STORAGE = 'storages.backends.oss.AliyunOSSStorage' - 配置云存储的访问密钥和Bucket名称
- 设置
CKEDITOR_UPLOAD_PATH为云存储中的路径
使用django-filebrowser集成
django-filebrowser是一个专门的文件管理工具，可以与CKEditor配合使用，安装后，在CKEditor配置中设置filebrowserBrowseUrl和filebrowserUploadUrl指向filebrowser的视图，即可获得完整的文件浏览器界面。
# 在settings.py中配置 CKEDITOR_CONFIGS['default']['filebrowserBrowseUrl'] = '/admin/filebrowser/browse/' CKEDITOR_CONFIGS['default']['filebrowserUploadUrl'] = '/admin/filebrowser/upload/'
这种方式适合需要文件管理功能的场景,如查看、删除、重命名已上传文件。
Flask中的手动实现
在Flask项目中,CKEditor没有官方扩展，你需要手动集成，上传图片的视图原理类似，但需要自己处理Flask的请求对象，示例如下：
from flask import Flask, request, jsonify
import os
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads/'
@app.route('/upload', methods=['POST'])
def upload():
file = request.files['upload']
if file:
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
url = '/static/uploads/' + filename
return jsonify({'url': url, 'uploaded': 1})
return jsonify({'error': '上传失败'})
然后在HTML中加载CKEditor JS，并配置上传URL。
CKEditor Flask使用指南
Flask项目集成CKEditor不同于Django,因为Flask没有像django-ckeditor这样的官方库，但你可以通过直接加载CKEditor JS文件，并手动配置后端来实现。
直接加载CKEditor JS
在Flask模板的<head>中加载CKEditor的CDN资源：
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
在需要富文本的<textarea>上应用CKEditor：
<textarea name="content" id="editor"></textarea>
<script>
CKEDITOR.replace('editor');
</script>
后端处理表单数据
当表单提交时,后端接收到的内容就是HTML代码，你可以在Flask视图中使用request.form.get('content')获取，然后存储到数据库。
@app.route('/save', methods=['POST'])
def save():
content = request.form.get('content')
# 存储到数据库或文件
return '保存成功'
文件上传配置
对于图片上传,需要单独编写上传接口，CKEditor通过filebrowserUploadUrl配置指定上传地址，在Flask中，创建一个路由接收上传文件，并返回CKEditor要求的JSON格式：
@app.route('/ckupload', methods=['POST'])
def ckupload():
f = request.files['upload']
filename = secure_filename(f.filename)
f.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
url = url_for('static', filename='uploads/' + filename)
return jsonify({'url': url, 'uploaded': '1'})
在模板中,配置编辑器时设置上传URL：
CKEDITOR.replace('editor', {
filebrowserUploadUrl: '/ckupload',
filebrowserBrowseUrl: '/ckbrowse'
});
使用Flask-Admin增强
如果你使用Flask-Admin管理后台，它支持CKEditor作为模型字段的编辑器，通过配置form_overrides和form_args，可以轻松将CKEditor集成到管理界面中。
from flask_admin.contrib.sqla import ModelView
from flask_admin import form
class ArticleView(ModelView):
form_overrides = {
'content': form.CKEditorField
}
form_args = {
'content': {
'label': '内容',
'ckeditor_config': {'toolbar': 'basic'}
}
}
这样,在Flask-Admin中编辑文章时，内容字段就会显示为CKEditor。
CKEditor与其他Python富文本编辑器对比
在Python Web开发中，除了CKEditor，还有TinyMCE、Quill、Summernote等富文本编辑器，它们各有特点，选择时需要根据项目需求权衡。
功能对比
| 特性 | CKEditor | TinyMCE | Quill | Summernote |
|---|---|---|---|---|
| 文档编辑能力 | 强，类似Word | 强 | 中等 | 中等 |
| 插件生态 | 丰富，有MathType、代码高亮等 | 丰富，有付费插件 | 中等，社区插件 | 少，基本功能 |
| 性能 | 较重，加载大量功能 | 中等，可按需加载 | 轻量，核心压缩后约40KB | 中等 |
| 社区活跃度 | 高，持续更新 | 高，企业支持 | 高，活跃 | 中等，更新慢 |
| Python集成支持 | Django有官方库，Flask需手动 | Django有官方库，Flask有库 | 社区库，如django-quill | 社区库，质量参差不齐 |
| 界面风格 | 经典，可定制主题 | 现代，可定制 | 简洁，模块化 | 简洁，基于Bootstrap |
场景选择建议
-
需要强大文档编辑功能：如果你的项目需要处理复杂表格、样式、代码高亮、数学公式等，CKEditor是首选，行业共识认为，CKEditor在富文本编辑领域的成熟度最高，尤其适合企业内部管理系统、内容管理平台。
-
追求轻量级和现代化：如果你希望编辑器加载快、API简洁，Quill更适合，它基于模块化设计，核心体积小，适合前端渲染密集的页面。
-
需要快速集成和丰富插件：TinyMCE提供官方云服务，插件市场完善，且对Python框架有良好支持，它的Django库（django-tinymce）和Flask库（flask-tinymce）都很稳定。
-
预算有限或简单场景：Summernote免费且易于上手，适合博客、论坛等简单编辑场景，但功能扩展性较弱。
集成难度对比
在Django项目中,CKEditor和TinyMCE都有成熟的第三方库，集成难度低，只需配置即可，在Flask项目中，CKEditor和TinyMCE都需要手动配置，但TinyMCE有官方Flask示例，而CKEditor则依赖社区资源，Quill和Summernote在Flask中的集成相对简单，因为后端只需处理HTML内容，无需特殊配置。
CKEditor在Python生态中的价值体现在其强大的编辑能力和灵活的集成方式，对于Django项目，django-ckeditor提供了无缝体验；对于Flask项目，手动集成同样可行，选择哪种编辑器，最终取决于你的项目对功能、性能和集成深度的具体需求。
CKEditor Python常见问题解答
如何在Django中安装CKEditor？
安装django-ckeditor库，在INSTALLED_APPS中添加ckeditor，配置媒体文件，然后在模型中使用RichTextField，具体步骤见上文“CKEditor Django配置”模块。
CKEditor图片上传返回403错误如何解决？
403错误通常是因为CSRF验证失败,在上传视图上添加@csrf_exempt装饰器，或者确保在CKEditor配置中正确传递CSRF令牌，检查settings.py中CSRF_TRUSTED_ORIGINS是否包含当前域名，并确认上传请求携带了CSRF cookie。
CKEditor与Flask集成时编辑器不显示？
确保正确加载了CKEditor的JS文件,并且textarea的id与CKEDITOR.replace中的参数一致，检查浏览器控制台是否有JavaScript错误，可能是由于其他库冲突导致，可以尝试将CKEditor的加载放在页面加载完成后执行，或者使用CKEDITOR.replace('editor', {})的配置参数，如果使用Flask-Admin，确保CKEditorField的导入正确。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/%e5%a6%82%e4%bd%95%e5%9c%a8python%e4%b8%ad%e5%ae%89%e8%a3%85ckeditor%ef%bc%9f%ef%bc%8c%e6%80%8e%e4%b9%88%e9%85%8d%e7%bd%ae/
