python的django开发练习_Django2练习项目：开发个人博客系统（12）

这一篇教程，我们一起学习如何在Django2项目中使用富文本编辑器Django-CKEditor。

提示：另一款富文本编辑器“SummerNote”的使用教程请参考《Django2：Web项目开发入门笔记(26)》。

例如，我们在Django后台中编辑文章内容时，就需要富文本编辑器。

一、安装

如果使用Django-CKEditor，我们需要先安装依赖库Pillow。

pip install pillow

然后，安装Django-CKEditor。

pip install django-ckeditor

二、设置

完成Django-CKEditor的安装后，打开文件“settings.py”，添加如下设置。

1、“INSTALLED_APPS”中添加“ckeditor”和“ckeditor_uploader’”。

示例代码：

INSTALLED_APPS = (

...省略部分代码...

'ckeditor',

'ckeditor_uploader'

)

2、添加Media相关配置

示例代码：

MEDIA_URL = '/media/'

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

3、添加CKEditor文件上传路径。

示例代码：

CKEDITOR_UPLOAD_PATH = "upload/" # 注意只有右侧带有“/”

4、添加CKEditor加载配置。

示例代码：

CKEDITOR_CONFIGS = {

'default': { # 添加默认配置

},

'mycfg': { # 添加自定义配置

'skin': 'moono', # 设置皮肤

'toolbar': 'full', # 设置工具栏加载全部功能

'width': '100%', # 设置宽度

},

}

可以预先定义多种配置(例如上方代码中的“mycfg”)，以便在不同的应用场景中调用不同的配置。

关于CKEditor的简体中文语言设置：

作者电脑上显示默认繁体中文，检查后发现原因在于CKEditor会使用“settings.py”文件中的语言设置。

Django使用简体中文时，我们的设置为“LANGUAGE_CODE = ‘zh-Hans’”，这是因为Django2语言文件夹中没有“zh-cn”文件夹，简体中文是“zh-Hans”文件夹，直接设置“LANGUAGE_CODE = ‘zh-cn’”会导致异常。

但是这样的设置又会导致CKEditor找不到名为“zh-Hans.js”的语言文件，当找不到文件时，CKEditor会找到第一个名称包含“zh”的js文件去调用。

所以，解决方案是修改Django语言文件夹或者CKEditor语言文件的名称，让他们保持统一。

不过CKEditor的语言文件的名称在PyCharm中提示不能更改，最终只好修改Django的简体中文语言文件夹名称为“zh-cn”，并将“settings.py”文件中的语言设置改为“LANGUAGE_CODE = ‘zh-cn’”。

提示：Django语言文件夹所在路径为：(venv)\Lib\site-packages\django\conf\locale

另外一种解决方案是将繁体中文的语言文件“zh.js”内容替换成了”zh-cn.js”中的简体内容。

示例代码：

CKEDITOR.lang['zh']={"editor":"所见即所得编辑器"...省略后方代码...

注意上方代码中标红的部分，要在替换了内容之后改回“zh”。

5、URL配置

打开文件“urls.py”，在“urlpatterns”列表中，包含CKEditor的URL配置。

示例代码：

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

三、使用

打开文件“models.py”，导入ckeditor模块中的字段类，修改文章类“Article”中的“content”字段。

示例代码：

from ckeditor.fields import RichTextField

class Article(models.Model):

...省略部分代码...

content = RichTextField('内容')

...省略部分代码...

在上方代码中，使用了“RichTextField”字段，默认会调用“settings.py”中的“default”设置，如果需要使用我们添加的自定义设置“mycfg”,可以在“RichTextField”的参数中进行指定。

示例代码：

content = RichTextField('内容',config_name='mycfg')

通过以上步骤的设置，我们就可以在Django后台中使用富文本编辑器了。

如果在我们自己编写的页面中使用CKEditor，需要在模板中(例如“base.html”)添加如下代码。

示例代码：

不过，通过以上的操作，我们还不能够在富文本编辑器中使用图片上传的功能。

四、设置图片上传

首先，打开文件“\venv\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\config.js”(本案例使用了虚拟环境)。

在打开的文件中添加配置。

示例代码：

CKEDITOR.editorConfig = function (config) {

config.filebrowserImageUploadUrl = "/upload/";

};

上方代码中，红色部分为新增代码。

添加这一段代码之后，在富文本编辑器中点击图片的图标会出现新的标签“上传”。

然后，我们还需要在视图文件“views.py”中编写一段上传文件的代码。

但是，因为Django自带防止跨域攻击的检查功能，还会导致上传会失败，所以，我们为这一段代码禁用跨域攻击检查。

示例代码：

import time

from django.shortcuts import Http404 # 导入404异常类

from django.views.decorators.csrf import csrf_exempt # 导入禁用跨域攻击检查的装饰器

@csrf_exempt # 装饰上传图片的视图函数

def image_upload(request): # 定义上传图片的视图函数

if request.method == 'POST':

callback = request.GET.get('CKEditorFuncNum') # 获取客户端上传事件的标记

try:

path = "media/upload/" + time.strftime("%Y%m%d%H%M%S", time.localtime())

f = request.FILES["upload"] # 获取上传文件的对象

file_name = path + "_" + f.name # 组织文件存储路径与名称

with open(file_name, "wb+") as file: # 创建文件

for chunk in f.chunks(): # 读取上传文件

file.write(chunk) # 写入文件

except Exception as e:

print(e)

res = ""

# 将上传文件的路径通过上传事件的标记写回浏览器客户端

return HttpResponse(res) # 返回响应内容

else:

raise Http404() # 抛出异常

添加完上述代码之后，我们进行URL配置。

示例代码：

...省略部分代码...

from django.urls import re_path

from . import settings

from django.views.static import serve

urlpatterns = [

...省略部分代码...

path('upload/', blog_view.image_upload),

re_path(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT})

]

最后，在项目根目录下添加“media”文件夹并在“media”文件夹下添加“upload”文件夹，以保证文件能够正常上传。

当然，“upload”文件夹也可以在图片上传的视图函数中通过代码创建。

到这里，我们就能够正常的使用图片上传功能了。