Django-ckeditor后台编辑器应用和绕坑

日期: 更新: 编程记录

在Django编辑器选择方面我推荐使用ckeditor

django-ckeditor, star:820 – Django 管理界面与 CKEditor 集成。

django-summernote, star:325 – Summernote 是一个简单的所见即所得编辑器。django-summernote 能将 Summernote 方便地嵌入到 Django 中。支持 mixins 和 widgets。

django-tinymce, star:615 – TinyMCE 与 Django 集成。

django-wysiwyg, star:440 – 一个 Django 应用，实现将 Django 文本框变成富文本编辑器。可用作模板标签，也可用于表单组件。

虽然百度django-ueditor还不错但是上传图片有漏洞具体可以参考以下文章:
在图片上传的路径可以控制文件名导致任意上传和替换原有文件非常危险

https://blog.nsfocus.net/djangoueditor-file-upload-vulnerability-analysis/

0x01 安装过程

https://github.com/django-ckeditor/django-ckeditor/

执行命令pip除了安装ckeditor她还会安装依赖
比如 django-js_assert

pip install django-ckeditor
如果需要在项目里直接看到ckeditor的文件可以把github源码包中的ckeditor和ckeditor_uploader放入项目内

这里只介绍在后台添加表单时如何使用ckeditor

第一步:
在项目中的urls.py文件中加入ckeditor的目录,添加一切外部扩展都必须能让他访问否则什么操作都是无效的

1
2 		from ckeditor_uploader import urls as ckeditor_uploader_urls
url(r'^ckeditor/', include(ckeditor_uploader_urls)),

然后再settings中添加APP

settings -> INSTALL_APPS 加入 ckeditor, ckeditor_uploader

第二步:
再APP的后台models.py把原来TextField字段变成ckeditor的设置字段

1
2 		from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField

RichTextField字段没有上传按钮
RichTextUploadingField存在上传按钮

设置字段

1 vul_plan = RichTextUploadingField(verbose_name='漏洞复测及修复', config_name="vul")

初步显示成功

0x02 定制化编辑器

看到上面的config_name是用来定制化工具栏的可以设置显示哪些需要的工具和栏目的高宽等等非常方便
具体设置在settings.py下设置
具体可以看官方

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 		CKEDITOR_CONFIGS = {
#字典内不同的键可以在字段内进行选择
"vul_address": {
'toolbar': 'Basic',# full,None设置工具栏复杂度
'height': 200,
'width': 550,
},

"vul": {
'height': 300,
'width': 600,
'toolbar': 'Custom',
'toolbar_Custom': [
{'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
{'name': 'yourcustomtools', 'items': [
# put the name of your editor.ui.addButton here
'Preview',
'Maximize',
]},
'/',

['Bold', 'Italic', 'Underline'],
{'name': 'colors', 'items': ['TextColor', 'BGColor']},
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
{'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},
{'name': 'insert',
'items': ['Image', 'Table']},

['Link', 'Unlink'],
['RemoveFormat', 'Source'],
]
}
}

0x03 编辑器上传安全应用

先设置urls.py必须让后台能访问到我上传的资源才行

1
2
3
4 		from 自己的项目名.settings import MEDIA_ROOT
from django.views.static import serve

url(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT}),

首先在settings.py下面设置

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 		#设置静态文件存放目录
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')


STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

#设置媒体文件目录
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

#上传方式
CKEDITOR_IMAGE_BACKEND = "pillow"

#上传到的目录
CKEDITOR_UPLOAD_PATH = "vul_images"

#只允许上传图片
CKEDITOR_ALLOW_NONIMAGE_FILES = False

#设置上传的文件名
首先在 ckeditor 目录下utils.py文件
def generate_uuid4_filename(filename):
"""
Generates a uuid4 (random) filename, keeping file extension

:param filename: Filename passed in. In the general case, this will
be provided by django-ckeditor's uploader.
:return: Randomized filename in urn format.
:rtype: str
"""
discard, ext = os.path.splitext(filename)
basename = uuid.uuid4()
return '{0}{1}'.format(basename, ext)

然后再settings.py下设置GENERATOR来指向这个函数,之后上传的文件名会以UUID来命名.

CKEDITOR_FILENAME_GENERATOR = 'ckeditor_uploader.utils.generate_uuid4_filename'

如无特殊说明，均为原创内容。转载请注明出处！