Django添加KindEditor富文本编辑器的使用


Posted in Python onOctober 24, 2018

KindEditor简介:

KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

KindEditor使用JavaScript编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

在Django Admin当中加入KindEditor,这比干巴巴的textarea好多了。加入之后的效果如下:

1、设置static文件路径

KindEditor是用JavaScript编写的,这属于static files,因此需要为Django设置static路径。

首先在工程目录下新建static文件夹,这里要注意的是千万不要在my_app/下创建static文件夹作为static文件存放的目录, 这会导致Django无法搜索到自己的static 文件。

创建后好,在settings中配置static文件目录。添加以下代码

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

2、下载KindEditor

下载KindEditor, 解压后将那些没用的asp, asp.NET, php, jsp, examples文件该删掉后拷贝到static目录下,由于KindEditor是js文件有事编辑器,所以就设置了js/editor目录,并将KindEditor代码拷贝到该目录下。

就像这样子static/js/editor/kindeditor-4.1.7

3、在admin后台管理当中的html页面加入JavaScript代码

在kindeditor-4.1.7目录下新建config.js文件,内容如下:

KindEditor.ready(function(K) {
 window.editor = K.create('#id_content',{
  // 指定大小
  width:'800px',
  height:'200px',
 });
});

4、在admin.py中的的管理类中添加class Media,引入js文件

这里是一个完整的admin.py示例

备注:class 一定要在admin.site.register前面,不然程序会报错,显示没有define

from django.contrib import admin
from .models import category,tags,article
# Register your models here.
class articleAdmin(admin.ModelAdmin):
 list_display = ('id','title','create_time','change_time','type') #添加字段显示
 search_fields = ('title') #添加快速查询栏
 class Media:
  # 在管理后台的HTML文件中加入js文件, 每一个路径都会追加STATIC_URL/
  js = (
   '/static/js/editor/kindeditor-4.1.7/kindeditor-all.js',
   '/static/js/editor/kindeditor-4.1.7/lang/zh_CN.js',
   '/static/js/editor/kindeditor-4.1.7/config.js',
  )
admin.site.register(category)
admin.site.register(tags)
admin.site.register(article,articleAdmin)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Python 相关文章推荐
简析Python的闭包和装饰器
Feb 26 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
Sep 21 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
Jul 18 Python
Python pymongo模块常用操作分析
Sep 01 Python
下载官网python并安装的步骤详解
Oct 12 Python
python日期与时间戳的各种转换示例
Feb 12 Python
pytorch:model.train和model.eval用法及区别详解
Feb 20 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
Jun 30 Python
Cpython解释器中的GIL全局解释器锁
Nov 09 Python
python实现猜拳游戏项目
Nov 30 Python
举例讲解Python装饰器
Dec 24 Python
python编程项目中线上问题排查与解决
Nov 01 Python
Django使用paginator插件实现翻页功能的实例
Oct 24 #Python
Python将8位的图片转为24位的图片实现方法
Oct 24 #Python
Python SMTP发送邮件遇到的一些问题及解决办法
Oct 24 #Python
使用PyCharm创建Django项目及基本配置详解
Oct 24 #Python
python实现在图片上画特定大小角度矩形框
Oct 24 #Python
python多进程使用及线程池的使用方法代码详解
Oct 24 #Python
python实现图片筛选程序
Oct 24 #Python
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
python pdb调试方法分享
2014/01/21 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
简单了解python的内存管理机制
2019/07/08 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Django获取应用下的所有models的例子
2019/08/30 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
初中女生自我鉴定
2013/12/19 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
自我鉴定标准格式
2014/03/19 职场文书
就业协议书样本
2014/08/20 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android