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

发布网友发布时间：2024-10-01 10:16

共1个回答

热心网友时间：2024-10-30 02:07

?由于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、下载完成后，解压，然后删除掉没有用的文件和目录，只保留图中的内容：

\ 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'),]

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

#?media媒体目录配置，根据系统自动选择/或\MEDIA_URL?=?'/uploads/'import?platformprint(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('其他')

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

from?django.conf?import?settingsfrom?django.contrib?import?adminfrom?rango?import?viewsfrom?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'),]

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

#?配置KindEditor富文本编辑器上传图片目录from?django.conf?import?settingsfrom?django.views.decorators.csrf?import?csrf_exemptimport?osimport?uuidimport?jsonimport?datetime?as?dt@csrf_exemptdef?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.mps(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

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

from?django.contrib?import?adminfrom?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',????????)

\ 这里我测试输入字符，各种格式，还有上传图片功能，都是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

原文：https://juejin.cn/post/7095550778772815886