Django项目后台admin富文本KindEditor教程0基础

由于Django开发过程中，发现对于博客类的文章前端显示不友好，所以想在后台集成一个富文本编辑器，这样就可以轻松的解决前台页面显示没有格式的问题，给你一个漂亮的、可以编辑格式的前端页面。

在引入富文本的过程中遇到了不少问题，也查了不少博客和相关资料，但是还是有些问题是网上的内容没办法解决的，最后还是通过自己动手实践、反复尝试才解决的，过程比较疼苦，我现在写这个教程就是从0基础开始的，真正动手完成，调试成功的，如果你完全按照我的教程没有解决的话，可以留言、或者私信联系我。

好了，我们先看一下，我们需要什么环境、工具或插件：
win7+python3.5+pycharm+Django1.11.X+KindEditor

这里简单介绍一下老牛X的KindEditor？
  KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

读到这里我默认大家win7+python3.5+pycharm+Django1.11.X这些都是齐全的，只是缺少了KindEditor，好现在我们来下载一下：
http://kindeditor.net/down.php

第一步：将KindEditor放置到项目中的正确目录
1、下载完成后，解压，然后删除掉没有用的文件和目录，只保留图中的内容：

2、然后将kindeditor整个目录copy到项目工作目录中的静态文件夹下的js文件夹中，目录结构如下图

3、在kindeditor目录下新建一个config.js文件，内容如下：

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

第二步：Django的项目配置文件修改
1、现在我们来配置一下Django的静态文件上传目录，如果已经配置了，也最好保证和我一致，防止出现问题。我们打开setting.py文件，添加如下图中的内容：

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

这里我需要重点讲解一下，STATIC_URL = '/static/'，这句代表我们访问的url中需要携带、访问映射的内容，具体的内容是在STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]，这个目录下，所以要保证STATICFILES_DIRS目录的正确性最好是print打印出来看一下。

2、后面我们上传图片需要用到media目录，这里我们在项目的static目录下创建media目录，如图：

现在我们继续在setting.py文件中设置一下MEDIA_URL和MEDIA_ROOT参数，这个作用和上面的static参数作用是类似的，也是通过携带MEDIA_URL的URL来访问映射的MEDIA_ROOT目录，具体配置如下：

# media媒体目录配置，根据系统自动选择/或\
MEDIA_URL = '/uploads/'
import platform
print(platform.system())

if(platform.system()=='Windows'):
    print('Windows系统')
    MEDIA_ROOT = os.path.join(BASE_DIR, "static\media")
elif(platform.system()=='Linux'):
    print('Linux系统')
    MEDIA_ROOT = os.path.join(BASE_DIR, "static/media")
else:
    print('其他')

大家可以看到我这里的MEDIA_ROOT参数是通过先判断平台的操作系统来动态赋值，因为我是在window下开发，最后部署在linux系统的，所以为了方便和防止一些不必要的错误，大家也最好保持一致。

注意：这里需要特别提醒大家的是MEDIA_URL一定要和后面的URLS.PY中配置的url匹配的内容保持一致，这个是在网上教程中没有提到过的，我当时尝试了2天才搞明白，大家一定要注意，后面配置URLS.PY的时候，我会再次提醒，这种比较小的细节，往往决定了你调试的结果，真的是血的教训，这里再次提醒前面的内容 ，大家务必保持和我的是一致的！

3、现在我们配置项目的URLS.PY文件（是项目的，不是应用的，和setting.py在同一级目录）

我们添加2个url的路由到文件中，如图：

from django.conf import settings
from django.contrib import admin
from rango import views
from django.views.static import serve

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

注意：这里要注意2点，第1点是网上有不少教程是将url(r'^upload/(?P<dir_name>[^/]+)$', views.upload_image, name='upload_image'),这句放在了应用中进行配置的，这里我不推荐（因为我配置后，一堆问题），大家最好保持一致。
第2点就是上一个注意特别提醒的url(r'^uploads/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT, }),
这个语句中正则表达式中的uploads一定要和setting.py中的MEDIA_URL是一致的，不然会导致访问的url链接找不到匹配的路由，如图：

第三步：应用配置文件和开发文件修改
1、在自己的应用中view.py中添加如下代码（这个是网上找的，稍后我会贴下链接）

# 配置KindEditor富文本编辑器上传图片目录
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import os
import uuid
import json
import datetime as dt


@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())

2、应用中view.py同级目录下我们找到models.py，打开，我们创建Category表对应的数据模型类

from django.db import models

# Create your models here.

class Category(models.Model):
    name = models.CharField(max_length=128, unique=True)
    profile = models.TextField("个人博客", blank=True)

    def __str__(self):
        return self.name

注意：这里要注意profile字段是代表使用KindEditor，不能修改成别的

现在我们需要同步去建数据库表和字段，我们分别执行python manage.py makemigrations 和python manage.py migrate命令，没有报错
的话（如图），我们就继续

3、现在我们需要做的最后一个配置就是在后台admin.py中注册我们在上一步创建的模型类，我们首先在view.py和models.py的同级
目录中找到admin.py，打开后注册前面创建的Category模型类，再导入KindEditor中的js，如下操作即可：

from django.contrib import admin
from rango.models import Category, Page

# Register your models here.
@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
    list_display = ['name']
    class Media:
        def __init__(self):
            pass

        js = (
            '/static/js/kindeditor/kindeditor-all.js',
            '/static/js/kindeditor/lang/zh_CN.js',
            '/static/js/kindeditor/config.js',
        )

注意：一定注意缩进，防止因为缩进导致异常，注意导入的js是在Media下的

第四步：检查、调试
1、现在在控制台输入python manage.py runserver，然后浏览器打开http://127.0.0.1:8000/admin/，将会看到如下图这样效果：

点击进入Categorys，点击新建add按钮，会看到如下效果：

这里我测试输入字符，各种格式，还有上传图片功能，都是OK的
注意：
这里需要注意的是好多人都发现图片没有办法上传，老是提示找不到/upload/kindeditor,那么请仔细检查前面的setting.py和
urls.py的配置，务必和我的保持一致，再重新调试，应该就可以了。

第五步：总结
让我们来概况的总结一下，我们的配置流程：
1、下载kindeditor，copy到我们的项目静态文件目录中，并创建config.js文件，输入固定内容（直接复制代码）
2、配置项目setting.py文件，新增static静态上传目录对应url和项目中映射的目录参数，在static目录下新增url对应url和
项目中映射的目录参数（直接复制代码）
3、配置项目urls.py文件，新增了2行正则表达式路由（直接复制代码），来分别映射上传media的根目录和上传文件的方法
4、配置应用中view.py文件（直接复制代码）、models.py中新建模型类（直接复制代码）、admin.py文件中注册模型类并引入
kindeditor的js文件
5、启动项目，访问调试，至此就全部结束了，看在博主这么细致的调教（不对，是讲解。），大家一定记得留个赞呦！

附录：
1、如果你按照教程都做完了，反复检查了，都没有问题，可以评论留言，或者私信我
2、这个文章也参照了其他博主的文章，这里留下原链接，大家可以没事去踩踩
https://blog.csdn.net/longshelan_113/article/details/80687583