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 网络编程起步(Socket发送消息)
Sep 06 Python
linux系统使用python监测系统负载脚本分享
Jan 15 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
Apr 21 Python
python字典快速保存于读取的方法
Mar 23 Python
基于Python实现用户管理系统
Feb 26 Python
python 杀死自身进程的实现方法
Jul 01 Python
pandas分区间,算频率的实例
Jul 04 Python
Python中的wordcloud库安装问题及解决方法
May 27 Python
python使用多线程+socket实现端口扫描
May 28 Python
python获取百度热榜链接的实例方法
Aug 25 Python
Pandas替换及部分替换(replace)实现流程详解
Oct 12 Python
Python Process创建进程的2种方法详解
Jan 25 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
JS设计模式之责任链模式实例详解
2018/02/03 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
对python中的装包与解包实例详解
2019/08/24 Python
python处理document文档保留原样式
2019/09/23 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
大学生学习党课思想汇报
2014/01/03 职场文书
实习生求职自荐信
2014/02/07 职场文书
秘书英文求职信
2014/04/16 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
检讨书1000字
2014/10/11 职场文书
学校2014年度工作总结
2014/12/06 职场文书
信息简报范文
2015/07/21 职场文书
学校隐患排查制度
2015/08/05 职场文书
学习委员竞选稿
2015/11/20 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python