django学习之admin中引入富文本编辑器KindEditor

django是python上著名的框架，使用起来非常方便，特别是自带了后台admin的管理，只要引入就可以直接使用。但是django后台admin中没有富文本编辑器，如果需要编辑一些富文本的话，比较不方便。在网上搜寻了一些推介方式，最后决定使用Kindeditor这个老牌国产富文本编辑器，因为之前在asp网站上面用过，相对来说功能挺强大，使用起来也很方便。现在总结一下引入时候迈的一些坑，以便大家参考。

本地环境是windows7，python3.7.2+django 1.10.3+pcharm commuty2021.1。

准备工作

第一步，到官网下载kindeditor，最新版本为4.1.11更新到2016年3月31日。

第二步，下载到本地以后，把一些实例删除掉（如果不介意的话，也可以提过此步）。具体删除内容见图中圈出来的。

第三步，在项目中引入Kindeditor

1.在项目根目录下新建多层目录结构：static\js\editor\kindeditor

2.把上一步删除过目录剩下的文件和目录一起复制到新建的kindeditor目录中，如图所示。

django中的配置

第一步：在setting.py中配置静态文件上传目录，kingeditor编辑器中上传的文件将保存在这里。

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),

配置上传目录文件media

MEDIA_URL = '/uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static\media')

第二步，在urls.py文件中配置路由

    from django.views.static import serve
    from sign.views import upload_image
    urlpatterns = [
        url(r'^uploads/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT, }),
        url(r'^upload/(?P<dir_name>[^/]+)$', views.upload_image, name='upload_image'),
    ]

这里需要说明一下，第一个路由是用于在编辑器中显示上传的图片，第二个路由是用于上传图片。网上提过可能1.10版本之前的django需要用

url(r'^uploads/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, }),

来显示图片，不过现在一般都是1.10以上版本了，可以不用考虑这个了。

第三步，在应用的view.py中处理上传文件。此代码来自网上，但是有一个人的版本少了一句代码，估计是复制时候没有注意，而我一开始刚好是参考他的，让我调试了很久。

from django.shortcuts import render
from django.http import HttpResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import os
import uuid
import json
import datetime as dt
from sign.models import Students


@csrf_exempt
def upload_image(request, dir_name):

    result = {"error": 1, "message": "上传出错"}
    files = request.FILES.get("imgFile", None)
    if files:
        result = image_upload(files, dir_name)

    return HttpResponse(json.dumps(result), content_type="application/json")

 
# 目录创建
def upload_generation_dir(dir_name):
    today = dt.datetime.today()
    dir_name = dir_name + '/%d/%d/' % (today.year, today.month)
    if not os.path.exists(settings.MEDIA_ROOT + dir_name):
        os.makedirs(settings.MEDIA_ROOT + dir_name)
    return dir_name


# 图片上传
def image_upload(files, dir_name):
    # 允许上传文件类型
    allow_suffix = ['jpg', 'png', 'jpeg', 'gif',
                    'bmp', 'zip', "swf", "flv",
                    "mp3", "wav", "wma", "wmv",
                    "mid", "avi", "mpg", "asf",
                    "rm", "rmvb", "doc", "docx",
                    "xls", "xlsx", "ppt", "htm",
                    "html", "txt", "zip", "rar",
                    "gz", "bz2"]
    file_suffix = files.name.split(".")[-1]
    if file_suffix not in allow_suffix:
        return {"error": 1, "message": "图片格式不正确"}
    relative_path_file = upload_generation_dir(dir_name)
    path = os.path.join(settings.MEDIA_ROOT, relative_path_file)
    if not os.path.exists(path):  # 如果目录不存在创建目录
        os.makedirs(path)
    file_name = str(uuid.uuid1()) + "." + file_suffix
    path_file = os.path.join(path, file_name)
    file_url = settings.MEDIA_URL + relative_path_file + file_name
    open(path_file, 'wb').write(files.file.read())
    # print(path_file)
    return {"error": 0, "url": file_url}  #就是这句返回，他没有复制进去。

第五步，在kindeditor目录中新建一个config.js文件，内容如下：

KindEditor.ready(function (k) {
    window.editor = k.create('#id_Content',{
        resizeType:1,
        allowPreviewEmoticons : false,
        allowImageRemote : false,
        uploadJson : '/upload/kindeditor',
        width:'800px',
        height:'400px',
    });
})

注意：里面的”id_content“就是我们后面需要在建模时候用的text字段的名称，到时候可以替换。

第五步，在setting.py中注释掉

'django.middleware.csrf.CsrfViewMiddleware',

这个是跨域请求伪造，我的机器上面如果不注释的话，会报错。

第六步，在admin.py中注册模型类，把kindeditor的js文件引入admin中。我的模型类是XXNR，这个按照自己的模型类修改就可以了。

from django.contrib import admin

@admin.register(XXNR)
class XXNRAdmin(admin.ModelAdmin):
    class Media:
        def __init__(self):
            pass
        js = (
            '/static/js/editor/kindeditor/kindeditor-all.js',
            '/static/js/editor/kindeditor/lang/zh_CN.js',
            '/static/js/editor/kindeditor/config.js',
        )

第七步，编写自己的模型，把富文本编辑框用上。

# 信息内容
class XXNR(models.Model):
    XId = models.IntegerField('编号',default=0)
    Title = models.CharField('标题',max_length=50)
    STime = models.DateTimeField('发布时间')
    Pic =models.ImageField('图片信息',upload_to='images')
    Content = models.TextField('详细内容',blank=True)
    IsHome = models.BooleanField('首页显示',default=False)
    sIndex = models.IntegerField('排序',default=0)
    Hits = models.IntegerField('点击',default=0)
    Keywords = models.CharField('关键字',max_length=50)
    # 外键关联
    XXLMId = models.ForeignKey("XXLM", on_delete=models.CASCADE)  # 关联Grade表的主键
    EJLMId = models.ForeignKey("EJLM", on_delete=models.CASCADE)  # 关联Grade表的主键

    def __str__(self):
        return self.Title

    class Meta:
        db_table = "XXNR"
        ordering = ["id"]
        verbose_name = "信息内容"
        verbose_name_plural = "信息内容"

然后就可以运行一下，看一下效果了哦

本次学习中花费很多时间在无用的坑上面，一个大坑就是自己给自己挖的，当时在路由配置中加入了一句url(r'^', views.index),原来是想如果都找不到的话，就直接打开index，谁知道后面的路由代码加在了它的后面，所有的路由都被它拦截了，找了半天才发现是这个问题。还有一个坑就是上面讲的，上传保存文件的代码少了一句，也是找了半天在发现。这些经验也证实我的python代码能力确实有待提高。