Django2X集成富文本编辑器CKeditor

尝试过ueditor,kindeditor最终选择了CKeditor,原因是django升级到2x以后url不会写/尴尬(我是业余学习的),不扯淡了,开始说怎么集成CKeditor

1.安装

pip install django-ckeditor

如果你要上传图片需要安装Pillow

pip install Pillow

2.在settings.py中注册CKeditor

INSTALLED_APPS = [
    'ckeditor',
    'ckeditor_uploader'
]

3.添加url

# 富文本编辑器
path('ckeditor/', include('ckeditor_uploader.urls')),

4.在settings.py中配置CKeditor

# ckeditor config
CKEDITOR_UPLOAD_PATH = 'ckeditor_upload/'
CKEDITOR_JQUERY_URL ='js/jquery-3.2.1.min.js'
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_CONFIGS = {
    'default': {
        'language': 'zh-cn',
        'toolbar_YourCustomToolbarConfig': [

            {'name': 'clipboard', 'items': ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord']},
            {'name': 'paragraph', 'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']},
            {'name': 'insert', 'items': ['Image', 'Table', 'HorizontalRule', 'Smiley']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'editing', 'items': ['Find', 'Replace', '-']},
            {'name': 'tools', 'items': ['Maximize']},
            '/',
            {'name': 'styles', 'items': ['Format', 'Font', 'FontSize']},
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'paragraph',
             'items': ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
            {'name': 'document', 'items': ['Source']},
        ],
        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
        'width': '100%',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage',  # the upload image feature
            # your extra plugins here
            'div',
            'autolink',
            'autoembed',
            'embedsemantic',
            'autogrow',
            'widget',
            'lineutils',
            'clipboard',
            'dialog',
            'dialogui',
            'elementspath'
        ]),
    }
}
CKEDITOR_ALLOW_NONIMAGE_FILES = False
CKEDITOR_BROWSE_SHOW_DIRS = True

其中CKEDITOR_UPLOAD_PATH = 'ckeditor_upload/'是文件上传的路径

配置好media:

# media_confige
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

那么上传文件后你的文件路径是'/media/ckeditor_upload'

5. 使用

在models.py 中使用RichTextUploadingField或RichTextField字段

class MyModel(models.Model):
    content = RichTextUploadingField(verbose_name=u'内容')

6. 发布

如果你在ubuntu服务器上发布需要collectstatic,把ckeditor中的静态资源copy到当前项目中

python manage.py collectstatic

Django2X集成富文本编辑器CKeditor

猜你喜欢