如何在Python中安装CKEditor？，怎么配置

CKEditor在Python生态中最成熟的集成方案是django-ckeditor，它让Django后台直接获得富文本编辑能力，而Flask等框架则需借助社区扩展或自行集成。

CKEditor Django配置：从安装到自定义

在Django项目中使用CKEditor,推荐通过django-ckeditor库实现，这个库封装了CKEditor的JS文件，并提供了模型字段类RichTextField，让集成变得简单。

加载中

【Pythonista 小教程】Pythonista Tools Installer 安装与使用

空语kongyu

6709421

原视频地址

安装与基础配置

确保你的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是首选，行业共识认为，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的导入正确。