django开发之django-ckeditor带upload

作者:清一

类别:django   

发布时间:2019/09/01 15:19:22   更新时间:2019/09/01 15:25:19


本文讲述的环境:ubuntu、python3、virtualenv。

ckeditor应该是最好用的文本编辑器了,django-ckeditor的官网是:

https://pypi.org/project/django-ckeditor/

 

django-ckeditor是使用在django的admin后台界面

 

安装

pip install django-ckeditor

 

配置settings

INSTALLED_APPS = [

    'ckeditor',

    'ckeditor_uploader'

]

MEDIA_URL = "/media/"

    MEDIA_ROOT = os.path.join(BASE_DIR,"media")

    CKEDITOR_UPLOAD_PATH = "uploads/"

CKEDITOR_IMAGE_BACKEND = 'pillow'

 

#限制非图形文件上传。

CKEDITOR_ALLOW_NONIMAGE_FILES

#打开浏览器上的目录

CKEDITOR_BROWSE_SHOW_DIRS

#按照日期分类

CKEDITOR_RESTRICT_BY_DATE

 

配置样式

CKEDITOR_CONFIGS = {

    'default': {

        'update': ['Image', 'Update', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],

        'skin': 'moono',

        'toolbar_Basic': [

            ['Source', '-', 'Bold', 'Italic']

        ],

        'toolbar_YourCustomToolbarConfig': [

            {'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},

            {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},

            {'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},

            {'name': 'forms',

             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',

                       'HiddenField']},

            '/',

            {'name': 'basicstyles',

             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},

            {'name': 'paragraph',

             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',

                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',

                       'Language']},

            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},

            {'name': 'insert',

             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},

            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},

            {'name': 'colors', 'items': ['TextColor', 'BGColor']},

            {'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},

            {'name': 'yourcustomtools', 'items': [

                # 自定义控件

                'Preview',

                'Maximize',

            ]},

        ],

        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here

        'tabSpaces': 4,

        'extraPlugins': ','.join(

            [

                # your extra plugins here

                'div',

                'autolink',

                'autoembed',

                'embedsemantic',

                'autogrow',

                # 'devtools',

                'widget',

                'lineutils',

                'clipboard',

                'dialog',

                'dialogui',

                'elementspath'

            ]),

    }

}

 

设置model.py中需要采用带上传图片的文本的内容

    from ckeditor_uploader.fields import RichTextUploadingField

    class Article(models.Model):

        content = RichTextUploadingField('正文')

 

设置urls.py

    from django.conf.urls import url,include

urlpatterns = [

path('ckeditor/', include('ckeditor_uploader.urls')),

        url(r'^ckeditor/', include('ckeditor_uploader.urls'))(django老版本)

    ]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

设置nginx

location ^~ /media {
    root /home/xxx/;
}

设置为/media/文件夹所在目录。

运行

登录后台、进入文章编辑界面、文章编辑工具栏上的图片图标、打开点击上传、浏览选择图片、上传到服务器。

如果正常,就显示了缩略图,并所在位置了。

通过修改源码,让普通用户可以上传。

源码只允许超级管理员上传,普通用户上传,可以通过修改源码搞定。

#注意:
# env\lib\python3.5\site-packages\ckeditor_uploader\urls.py
#超级管理员可上传。
#url(r'^upload/', staff_member_required(views.upload), name='ckeditor_upload'),
#普通用户可上传。
#url(r'^upload/', views.upload, name='ckeditor_upload'),

 

在django的后台和前台使用ckeditor的不同

上文讲的,全是在django的admin的管理后台使用ckeditor。

如果要在前台使用文本编辑,前端开发人员可能有很多选择。

如果前端也决定使用ckeditor。

在渲染表单的那个页面需要引入 ckeditor-init.js 和 ckeditor.js 两个文件,否则编辑器无法显示。

{% load static %}

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>

<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

 

要注意一点,原则上,现在是不能随便建设论坛和评论的。。。

所以,前端建设大量的文本编辑,不知道合适不。大家懂得。。。


本文属于原创文章,未经许可,任何媒体、公司或个人不得刊发或转载。

本文网址:https://www.pyfield.com/blog/?id=24