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中利用生成器实现的并发编程
May 04 Python
在Linux中通过Python脚本访问mdb数据库的方法
May 06 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
Apr 21 Python
Python基于分水岭算法解决走迷宫游戏示例
Sep 26 Python
python调用xlsxwriter创建xlsx的方法
May 03 Python
对python的输出和输出格式详解
Dec 08 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
May 10 Python
使用python实现离散时间傅里叶变换的方法
Sep 02 Python
Django框架ORM数据库操作实例详解
Nov 07 Python
关于sys.stdout和print的区别详解
Dec 05 Python
DataFrame.groupby()所见的各种用法详解
Jun 14 Python
Python中json.dumps()函数的使用解析
May 17 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
Python中获取对象信息的方法
2015/04/27 Python
Python文件及目录操作实例详解
2015/06/04 Python
django批量导入xml数据
2016/10/16 Python
python实现名片管理系统项目
2019/04/26 Python
python中update的基本使用方法详解
2019/07/17 Python
python修改字典键(key)的方法
2019/08/05 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
php png失真的原因及解决办法
2021/11/17 PHP