【Django】CKeditor富文本编辑器上传图片到FastDFS存储

因为在存储数据的时候可能会遇到存储信息并非纯文本的情况，比如说带有HTML语法，带有图片URL等，即富文本格式，也许我们需要使用富文本字段来存储具备丰富格式的文本

1.安装CKeditor与配置

pip install django-ckeditor

在配置文件 settings.py 添加应用

NSTALLED_APPS = [
    ...
    'ckeditor',  # 富文本编辑器
    'ckeditor_uploader',  # 富文本编辑器上传图片模块
    ...
]
...
# CKEditor相关配置
CKEDITOR_CONFIGS = {
    'default':{
        'toolbar':'full', # 使用工具条
        'height': 300, # 编辑高度
        # 'woidth': 300, # 编辑宽度
    },
}
CKEDITOR_UPLOAD_PATH = '' # 存储路径，因为我们使用了FastDFS，所以这里设置为空

设置总路由 urls.py

urlpatterns = [
    ...
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

2.修改模型类

根据我们的实际项目需要，修改模型相应的字段，设置为RichTextField (不支持文件)或RichTextUploadingField（支持文件）

apps/goods/models.py

class Goods(BaseModel):
	...
	desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')

修改之后记得重新迁移才能生效

3.上传图片

我这里以上传图片为例。此项目使用的是FastDFS存储图片。关于FastDFS环境的搭建可以参考之前的笔记

【Django】使用FastDFS docker镜像存储图片和读取图片

我们新建一个只存储图片的模型类进行测试

apps/upload/models.py

class CommonImage(models.Model):
    image = models.ImageField(verbose_name="图片")
    create_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    update_time = models.DateTimeField(auto_now=True, verbose_name='更新时间')

    class Meta:
        db_table = "tb_commonImage"

    def __str__(self):
        return self.id

记得重新迁移数据库

apps/upload/views.py

from django.conf import settings
from django.shortcuts import redirect
from fdfs_client.client import Fdfs_client
from django.views import View
from django.http import HttpResponse

from .models import CommonImage

class ImageCommonView(View):
    def post(self,request):
        client = Fdfs_client(settings.FDFS_CLIENT_CONF)
        data = request.FILES.get('upload')
        callback = request.GET.get('CKEditorFuncNum')

        res = client.upload_by_buffer(data.read())
        if res['Status'] != 'Upload successed.':  # 如果上传失败
            return HttpResponse(status=403)
        image_url = res["Remote file_id"]  # 获取FastDFS返回的图片标识
        CommonImage.objects.create(image=image_url) # 存进数据库

        from_address = request.META['HTTP_REFERER']
        from_address = from_address[:from_address.rfind('/'):]
        # 返回重定向格式
        # http://192.168.203.153:8080/upload_success.html?image_url=http://192.168.203.153:8888/group1/M00/00/02/wKjLmV-Hr8eALcERAADYK4ex7Tc1786436&CKEditorFuncNum=1
        ret_url = from_address + '/upload_success.html?image_url=' + settings.FDFS_URL + image_url + '&CKEditorFuncNum=' + callback
        return redirect(ret_url)

不出意外的话应该是可以正常上传和显示图片的

顺便记录一个BUG

因为路径设置不正确（返回重定向的路径正常就不会有这个错误了），所以期间遇到了一个 in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’ 的错误
Refused to display 'http://127.0.0.1:8000/upload/common/?CKEditor=editor2&CKEditorFuncNum=1&langCode=zh-cn' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
解决方法是在对应的方法使用装饰器@xframe_options_exempt就可以解决了

from django.views.decorators.clickjacking import xframe_options_exempt
class ImageCommonView(View):
    @xframe_options_exempt
    def post(self,request):
    	...