首页 > Tinynote > Django 集成 CKEditor 踩过的坑

Django 集成 CKEditor 踩过的坑

2018年4月11日 发表评论 阅读评论

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

该项目在github上开源。

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

语言设置为中文

以下设置一个都不能少:

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 中以下设置

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 时,配置如下:

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 中添加配置:

CKEDITOR_CONFIGS = {
    'default': {
        …
        'extraPlugins': ','.join(['image2']),
    },
}

 

 

  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.