Django不自带富文本编辑器，但是富文本编辑器是做CRM系统不可缺的工具。我们前后尝试过多个富文本编辑器， 包括但不限于Ueditor, Django-Summernote等。
最后找到一个最合适的方案： django-ckeditor

Django WYSIWYG

我们在接入CKEDITOR时用到另一个工具：django-wysiwyg
此物作用是将Django的各种WYSIWYG编辑器进行统一封装，做成一个接口统一的接口。其只提供接口，具体要用的各个编辑器本身， 还是需要分别安装的。
此工具主要提供几个tag和一个change_form.html页面。

  • 当在我们自己写的APP中使用时, 只需按照其文档，调用tag即可将textarea标签转换为settings中配置好的富文本编辑器，无需修改任何py代码。
  • 而change_form.html是用于替换Django Admin中的change form template的。
    原理是继承于原admin的change_form.html并添加了WYSIWYG相关代码。

安装步骤

  1. 安装相关库

    1
    2
    pip install django-wysiwyg
    pip install django-ckeditor

  2. 在INSTALLED_APPS中添加相应的库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    INSTALLED_APPS = [
        ……
        'ckeditor',
        'ckeditor_uploader',
        'django_wysiwyg',
        ……
    ]

  3. 确保项目的STATIC_ROOT, STATIC_URL, MEDIA_ROOT, MEDIA_URL等正确配置

  4. settings中添加相应配置

    1
    2
    3
    4
    5
    6
    7
    DJANGO_WYSIWYG_FLAVOR = "ckeditor"  # 使用哪个符文本编辑器
    CKEDITOR_UPLOAD_PATH = "ck_uploads/"  # 文件上传路径
    CKEDITOR_UPLOAD_SLUGIFY_FILENAME = True
    CKEDITOR_IMAGE_BACKEND = 'pillow'  # 使用pillow处理图片
    CKEDITOR_ALLOW_NONIMAGE_FILES = False  # 只允许上传图片
    CKEDITOR_JQUERY_URL = "%s/jslib/jquery-1.11.0.min.js" % STATIC_URL  # 指定jquery文件路径,否则会使用google cdn.
    DJANGO_WYSIWYG_MEDIA_URL = "%s/ckeditor/" % STATIC_URL  # 指定ckeditor 的js和css所在路径

  5. urls中添加相关uploader url

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

  6. CKEDITOR推荐配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    {
        'skin': 'moono',
        # 'skin': 'office2013',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_YouCustomToolbarConfig': [
            {
                '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': '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': 'styles',
                'items': [
                    'Styles', 'Format', 'Font', 'FontSize'
                ]
            },
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {
                'name': 'tools',
                'items': [
                    'Maximize',
                    'ShowBlocks',
                    'Preview',
                    'Source',
                ]
            },
        ],
        # put selected toolbar config here
        'toolbar': 'YouCustomToolbarConfig',
        # '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,
        'filebrowserImageUploadUrl': '/ckeditor/upload/',
        'extraPlugins': ','.join(
            [
                # you extra plugins here
                'div',
                'autolink',
                'autoembed',
                'embedsemantic',
                'autogrow',
                'image2',
                # 'devtools',
                'widget',
                'lineutils',
                'clipboard',
                'dialog',
                'dialogui',
                'elementspath'
            ]),
    }

  7. 在需要使用富文本编辑器的地方调用WYSIWYG 提供的tag:

    1
    2
    3
    {% load wysiwyg %}  # 加载tag
    {% wysiwyg_setup %}  # 引入富文本编辑器的js, css等
    {% wysiwyg_editor "id_detail" "id_detail_editor" CKEDITOR_CONFIGS|safe  %}  # 在需要使用富文本编辑器的元素后调用, 注意配置必须用safe filter传入， 否则会转义, js会报错

关于图片上传

  1. 务必安装并正确配置ckeditor_uploader
  2. 在CKEDITOR的配置中， 必须配置filebrowserImageUploadUrl
  3. 推荐使用image2插件来替换原来的image插件， 更简洁好用
  4. CKEDITOR是可以支持图片拖拽和复制的， 会自动上传。详见uploadimage插件。