Django 集成 CKEditor 踩过的坑

Posted on Edited on

上一次说到了在 django 中集成 tinymce。但在使用过程中发现功能不够强大。如自定义css, 上传文件等功能缺失，所以转向功能更全的 ckeditor

该项目在github上开源。

基本按照 github 上的简介就可以将其集成到项目里。但也有一些坑：

语言设置为中文

以下设置一个都不能少：

1
2
3
4
5
6
7
8
9
10
11
12
13
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True

LANGUAGES = [
    ('en', 'English'),
    ('zh-cn', 'Chinese'),
]

MIDDLEWARE_CLASSES = [
    …
    'django.middleware.locale.LocaleMiddleware',
]

上传图片

settings.py 中以下设置

1
2
3
4
5
6
7
8
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = "uploads/"

INSTALLED_APPS = [
    …
    "ckeditor_uploader",
]

其中 CKEDITOR_UPLOAD_PATH 必须是相对路径，相对基地址为 MEDIA_URL

在 model 中使用时，使用 from ckeditor.fields import RichTextField , 在 form 中使用时，使用 from ckeditor_uploader.fields import RichTextUploadingFormField

Toolbar

使用自定义的 toolbar 时，配置如下：

1
2
3
4
5
6
7
8
9
10
11
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar_mytoolbar': [
            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
            # others …
        ],
        'toolbar': 'mytoolbar',
        'height': 500,
        'width': 1024,
    },
}

务必注意，自定义名称需要使用 toolbar_ 前缀

添加内置插件

希望插入的图片带有标题，搜索发现有内置插件 Enhanced Image 。具体文档戳这里。
在 setting.py 中添加配置:

1
2
3
4
5
6
CKEDITOR_CONFIGS = {
    'default': {
        …
        'extraPlugins': ','.join(['image2']),
    },
}