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 serveurlpatterns = [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_suffixpath_file = os.path.join(path, file_name)file_url = settings.MEDIA_URL + relative_path_file + file_nameopen(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):passjs = ('/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

Django项目后台admin富文本KindEditor教程0基础相关推荐

Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...
python自动发邮件富文本_django 实现后台从富文本提取纯文本
前言: 很多时候我们都会用富文本,比如说在版权区.博客文章编辑时等等.但是如果我们要做一个搜索的功能,去从富文本中查找关键字,就需要将富文本中的文本了.但是 django 并没有专门函数去做.这个时候 ...
百度富文本编辑jsp上传_百度富文本编辑器教程，从入门到放弃
原标题:百度富文本编辑器教程,从入门到放弃百度UEditor 资源与项目分离-完全教程夏老师人真好又求到一篇技术贴来来来继续掏出小本本什么是百度UEditor? 百度UEditor是一款富 ...
kind富文本编辑器_在项目中集成富文本编辑器
前言现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
c语言语言教程0基础_C语言基础
c语言语言教程0基础 Hey, Folks here I am back with my second article on C language. Hope you are through with ...
.net5项目集成百度富文本编辑器umeditor最全教程（含源码）
目前百度的umeditor已经停止维护了,net版本的分支源码包也停留在了net farmework4左右的版本,对于想要集成这款富文本编辑器到net5平台,具有较大难度,主要体现在以下几个方面: u ...
django html文本编辑器,django xadmin 集成DjangoUeditor富文本编辑器
#### 本文档记录自己的学习历程! #### 介绍 - Ueditor HTML编辑器是百度开源的在线HTML编辑器,功能非常强大 #### 额外功能 - 解决图片视频等无法上传显示问题 #### ...
在Django项目中使用富文本编辑器
2019独角兽企业重金招聘Python工程师标准>>> 1 开发要点现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.cke ...

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

Django项目后台admin富文本KindEditor教程0基础相关推荐

最新文章

热门文章