django-ckeditor upload image and settings 完全解决方案。实践出真知

时间:2022-07-04 07:35:10

题外话:被一个Bug卡半天很正常。。。我也习惯了没有人教你怎么做怎么搞。。。自己动手丰衣足食。。呵呵!

PreFace:
个人项目用到了ckeditor 前面配置,使用什么都很简单流水设置。。。
详细教程见: https://github.com/riklaunim/django-ckeditor/tree/master/ckeditor/static/ckeditor/ckeditor

Now:
现在想要实现后台上传图片功能:
首先:改变 models.py

from ckeditor_uploader.fields import RichTextUploadingField

...
class Post(models.Model):
    ...
    body = RichTextUploadingField(verbose_name='正文')  # 在你的正文里加上这种Field 

更改设置文件 settings.py

INSTALLED_APPS = (
    ...
    'ckeditor',
    'ckeditor_uploader',
)

# Media files
MEDIA_URL = '/uploader/'  # 你的media url 在Url显示并没什么关系
MEDIA_ROOT = '.../media/' # 你media 的绝对地址。从根目录到你的media目录:/root/.../media/

#注意! media 目录与 CKEDITOR_UPLOAD_PATH 是相对的所以:
# Ckeditor settings
CKEDITOR_UPLOAD_PATH = "uploads/"  # 他的目录相对与media root 就是 media root + CKEDITOR_UPLOAD_PATH 不能写成"/uploads/"
CKEDITOR_JQUERY_URL = 'js/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = 'pillow'  # 图像库支持需要安装 PIL

# 这个设置看你的偏好。。。仅仅是一个exsample
CKEDITOR_CONFIGS = {
    'default': {
        'update': ['Image', 'Update', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
        'skin': 'moono',
        # 'skin': 'office2013',
        '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': 'about', 'items': ['About']},
            '/',  # put this to force next toolbar on new line
            {'name': 'yourcustomtools', 'items': [
                # put the name of your editor.ui.addButton here
                'Preview',
                'Maximize',

            ]},
        ],
        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
        # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
        # 'height': 291,
        # 'width': '100%',
        # 'filebrowserWindowHeight': 725,
        # 'filebrowserWindowWidth': 940,
        # 'toolbarCanCollapse': True,
        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
        'tabSpaces': 4,
        'extraPlugins': ','.join(
            [
                # your extra plugins here
                'div',
                'autolink',
                'autoembed',
                'embedsemantic',
                'autogrow',
                # 'devtools',
                'widget',
                'lineutils',
                'clipboard',
                'dialog',
                'dialogui',
                'elementspath'
            ]),
    }
}

最后你需要配置你的URL
URL 或者是上面的任一步骤没有完全配置好都会导致失败.如我遇到的

[17/Jul/2016 12:28:56] "GET /uploader/uploads/2016/07/17/shiyan2.png HTTP/1.1" 404 3657

没有找到文件。

这是因为没有配置好URL:

from django.conf.urls.static import static
from django.conf import settings


urlpatterns = [
    ...,
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

OK。如果有什么问题可以留言。