Django 设置admin后台的某一个model的字段为富文本编辑器

Django 设置admin后台的某一个model的字段的类型为富文本编辑器，该富文本编辑器不但能够上传数据，还能够上传图片，并能够显示图片。
首先，在models.py中，创建一个models类，字段的类型先设置成CharField

class Article(models.Model):
    content = models.CharField(max_length=255, verbose_name='文章内容')

现在的话，在admin后台显示的输入框是这个样子的
在这里插入图片描述

现在，将上面类型的框要换成富文本编辑器
首先，去网上下载http://kindeditor.net/down.php包
在这里插入图片描述

下载之后，是一个压缩包，之后解压是一个kindeditor文件夹。将这个文件夹复制到static文件夹下
在这里插入图片描述
之后将kindeditor文件夹下没有必要的文件夹删除，比如：asp、asp.net、jsp、php几个文件夹删除。

之后，由于文章添加需要使用富文本编辑器，所以在admin.py中，指定富文本编辑器要使用的一些css、js等文件；

from django.contrib import admin
from .models import *


class ArticleAdmin(admin.ModelAdmin):
    list_display = ('title', 'desc', 'click_num', 'comment_num')

    # 设置admin后台的文章Model列表页，哪些字段可以被点击。
    list_display_links = ('title', 'desc')

    # 设置哪些字段是可以编辑的
    # list_editable = ('click_num', 'comment_num')

    # fields = () 设置添加文章时，显示哪些字段。

    # 由于文章添加需要使用富文本编辑器，所有在这里，指定富文本编辑器要使用的一些css、js等文件；
    class Media:
        js = (
            '/static/kindeditor/kindeditor-all-min.js',
            '/static/kindeditor/lang/zh-CN.js',
            '/static/kindeditor/config.js'
        )
admin.site.register(Article, ArticleAdmin)

在kindeditor的文件夹下创建一个js文件名为config.js，其中，#id_content就是之前的那个编辑框的id
width就是富文本编辑框的宽度
height就是富文本编辑框的高度
uploadJson就是上传文件所绑定的路由，该路由在urls.py中需绑定函数，在函数中写上传之后的代码

KindEditor.ready(function(K){
   window.editor = K.create('#id_content', {
       width: '700px',
       height: '300px',
       uploadJson: '/admin/upload/'
   });
});

在这里插入图片描述

在urls.py中：

path('/admin/upload/',upload_img),

其中，我设置了图片的路径
settings.py中：

MEDIA_URL = '/uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR,'uploads')
# MEDIA_URL主要就是映射MEDIA_ROOT。将来展示图片的时候，要使用这个键找到MEDIA_ROOT这个值。否则图片可以上传，但是无法加载图片

在urls.py 中：

re_path(r'uploads/(.*)$',serve,{'document_root':settings.MEDIA_ROOT}),

现在：编辑框变成：
在这里插入图片描述

最后，要完成在富文本编辑器里上传图片，并且能够正常显示

就要在views.py文件中，实现upload_img函数了

import json, datetime, os
from django.db.models import Count
from django.shortcuts import render
from django.http import JsonResponse, HttpResponse
from django.conf import settings
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage, InvalidPage

from .models import *

# csrf_exempt: 该装饰器是用于视图函数，不适合通用视图。主要就是取消某一个视图函数的csrf认证；
# csrf_protect: 某一个视图函数需要csrf认证；

"""
当项目90%都不需要csrf认证：
将 'django.middleware.csrf.CsrfViewMiddleware' 这个中间件注释，需要认证的视图函数单独添加装饰器csrf_protect；
当项目90%都需要csrf认证：
将 'django.middleware.csrf.CsrfViewMiddleware' 这个中间件解注释，不需要认证的视图函数单独添加装饰器csrf_exempt；
"""

from django.views.decorators.csrf import csrf_exempt, csrf_protect


@csrf_exempt
def upload_img(request):
    # 接收admin后台的富文本编辑器上传的图片，将这个图片保存在项目下的uploads目录下；
    result = {'error': 1, 'message': '上传图片失败'}
    # 获取富文本编辑器上传的图片
    file = request.FILES.get('imgFile', None)
    if file:
        # 将图片文件写入到本地
        result = image_save(file)
    else:
        # 返回错误信息
        result = {'error': 1, 'message': '请选择图片'}
    return HttpResponse(json.dumps(result), content_type='application/json')


def image_save(file):
    # 存储图片的函数
    # 定义允许上传的图片类型
    allow_img = ['jpg', 'jpeg', 'png', 'gif']
    file_img = file.name.split('.')[-1]
    if file_img not in allow_img:
        return {'error': 0, 'message': '图片格式不支持'}
    # 在/uploads/下创建一个文件夹，保存富文本上传的图片
    now_date = datetime.datetime.now()
    # 利用settings.MEDIA_ROOT和dir拼接图片的上传路径
    dir = 'kindeditor' + '/%d/%d/' % (now_date.year, now_date.month)
    img_url = settings.MEDIA_ROOT + '/' + dir

    if not os.path.exists(img_url):
        os.makedirs(img_url)
    with open(img_url + file.name, 'wb') as f:
        f.write(file.file.read())
    # 在返回上传图片的url地址时，不能返回img_url这个上传路径，需要返回MEDIA_URL这个地址；通过MEDIA_URL映射到MEDIA_ROOT。
    file_url = settings.MEDIA_URL + dir + file.name
    return {'error': 0, 'url': file_url}

在这里插入图片描述

Django 设置admin后台的某一个model的字段为富文本编辑器

猜你喜欢