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

太过爱你忘了你带给我的痛 2022-12-15 03:24 244阅读 0赞

因为在存储数据的时候可能会遇到存储信息并非纯文本的情况，比如说带有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镜像存储图片和读取图片][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)

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70_pic_center]

顺便记录一个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):
        	...

[Django_FastDFS docker]: https://blog.csdn.net/qq_39147299/article/details/108874819
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTQ3Mjk5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e73bcf1bcf31485fa2123896a1514597.png