Django的admin中使用富文本编辑器 CKEditor上传图片
Web开发 . 2019/11/07发布 . shanyonggang_web . 我要评论 . 260阅读

CKEditor的安装

采用pip安装即可

pip install django-ckeditor   # django富文本编辑器库
pip install pillow    # 安装图片处理库

settings.py配置

添加app

INSTALLED_APPS = [
    *  # *表示前面系统自带及自己添加
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 文件上传
]

        设置富文本编辑器配置

# 配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'   # 图片上传路径,需要注意的是,如果使用django自带的存储,那么路径是一个相对路径,它相对与你设置的的MEDIA_ROOT。
CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'250px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'],
            ['Find', 'Replace', '-', 'SelectAll'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
            'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
            'Language'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe'],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor'],
            ['Maximize', 'ShowBlocks'],
            ['About'],
            [# put the name of your editor.ui.addButton here
                'Preview',
                'Maximize',

            ],
            # 表情 代码块
            ['Smiley', 'CodeSnippet'],  
        ],
        # 加入代码块插件
        # uploadimage: 允许用户直接在编辑器里复制粘贴
        # prism:允许代码高亮显示
        # codesnippet:添加代码块的功能
        'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils','uploadimage']),
    }
}

路由的配置

        在主路由下添加如下代码:

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

使用

        在需要使用富文本编辑器的models.py中引入如下代码

# 不支持文件上传的富文本字段
from ckeditor.fields import RichTextField
# 支持文件上传的富文本字段
from ckeditor_uploader.fields import RichTextUploadingField

        更改模型中所需引入富文本的字段,如下:

# 文章正文
body = RichTextUploadingField(verbose_name='文章内容')

        更改完后记得python manage.py makemigrations/python manage.py migrate进行模型的数据迁移


  • 有疑问请在下方评论区留言,我会尽快回复。
  • Email私信我: 511248513@qq.com 或添加博主 微信
本文作者:shanyonggang_web
发布时间:2019年11月7日 22:52
许可协议: 署名-非商业性使用 4.0 国际许可协议
知识共享许可协议     转载请保留原文链接及作者
正在加载今日诗词....
您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的


登录 后回复

当前暂无评论,点击登录来做第一个吃螃蟹的人吧!