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 相关文章推荐
pycharm 使用心得(二)设置字体大小
Jun 05 Python
Python2.x版本中cmp()方法的使用教程
May 14 Python
Python 模块EasyGui详细介绍
Feb 19 Python
Flask-Mail用法实例分析
Jul 21 Python
Python实现模拟浏览器请求及会话保持操作示例
Jul 30 Python
解决Pycharm下面出现No R interpreter defined的问题
Oct 29 Python
Laravel+Dingo/Api 自定义响应的实现
Feb 17 Python
python3 下载网络图片代码实例
Aug 27 Python
python实现超市商品销售管理系统
Nov 22 Python
python enumerate内置函数用法总结
Jan 07 Python
Python插入Elasticsearch操作方法解析
Jan 19 Python
Python类和实例的属性机制原理详解
Mar 21 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 在线打包_支持子目录
2008/06/28 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
python检测lvs real server状态
2014/01/22 Python
常见的python正则用法实例讲解
2016/06/21 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python实现图片素描效果
2020/09/26 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
优秀小学生家长评语
2014/01/30 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
安全生产活动月方案
2014/03/09 职场文书
社区科普工作方案
2014/06/03 职场文书
党员创先争优心得体会
2014/09/11 职场文书
实习单位证明范例
2014/11/17 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS