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守护进程(daemon)代码实例
Mar 06 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
Jan 24 Python
Python自定义线程池实现方法分析
Feb 07 Python
详解Python if-elif-else知识点
Jun 11 Python
python实现在cmd窗口显示彩色文字
Jun 24 Python
python实现最小二乘法线性拟合
Jul 19 Python
linux环境下Django的安装配置详解
Jul 22 Python
Python在Matplotlib图中显示中文字体的操作方法
Jul 29 Python
浅析pandas 数据结构中的DataFrame
Oct 12 Python
Python内置加密模块用法解析
Nov 25 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
Dec 13 Python
pytorch 如何使用amp进行混合精度训练
May 24 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
python读取二进制mnist实例详解
2017/05/31 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
保险公司晨会主持词
2014/03/22 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
法人委托书范本格式
2014/09/15 职场文书
婚宴邀请函
2015/01/30 职场文书
小学中队活动总结
2015/05/11 职场文书
法律意见书范文
2015/06/04 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技