Django添加KindEditor富文本编辑器的使用
作者:JueYings 发布时间:2022-01-06 07:41:17
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)
来源:https://blog.csdn.net/jueyings/article/details/70332429
猜你喜欢
- 整理了一下python 中文件的输入输出及主要介绍一些os模块中对文件系统的操作。文件输入输出1、内建函数open(file_name,文件
- ARIMA模型ARIMA模型的全称是自回归移动平均模型,是用来预测时间序列的一种常用的统计模型,一般记作ARIMA(p,d,q)。ARIMA
- 问题你想在使用范围内执行某个代码片段,并且希望在执行后所有的结果都不可见。解决方案为了理解这个问题,先试试一个简单场景。首先,在全局命名空间
- 英文文档:locals()Update and return a dictionary representing the current l
- 本文实例为大家分享了python实现分页效果展示的具体代码,供大家参考,具体内容如下难点:清空Layout#!/usr/bin/python
- 新建图像文件后选Channels面板,新建Alpha1通道:输入文字; &nbs
- 恭喜您,您中奖了,你的中奖码是(请牢记,领奖需要):XXXXXXXXXXX然后用户输入XXXXXXXXXXX,简单验证后就可以领奖了。你使用
- Python3 使用pillow库生成随机验证码的代码如下所示:import random# pillow 包的使用from PIL imp
- 其实这里的静态页面并不是真正意义上的静态,但可以达到了静态页面的解析效率,还未经项目测试,拿来分享。代码如下:<% Cons
- 同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完
- 去年曾总结了《IE对CSS样式表的限制和解决方案》中限制的第4条写道“一个CSS文件的不能超过288kb?”,这是一个疑问句,当时没有重现出
- 1. RequestDispatcher.forward()在服务器端起作用,当使用forward()时,Servlet engine传递H
- Mac版Python3安装/升级Mac系统自带Python,但都是2.X版本,非常老的版本了。如果我们需要安装Python3版本,怎么能快速
- 以去掉去掉<!--和-->为例进行说明:def clearContentWithSpecialCharacter(content
- 用面向对象的思维解决问题的重点当遇到一个需求的时候不用自己去实现,如果自己一步步实现那就是面向过程;应该找一个专门做这个事的人来做。面向对象
- ob缓存介绍ob是output buffering的简称,输出缓冲区,缓冲区是通过php.ini中的output_buffering变量控制
- 在数据库的开发过程中,经常会遇到复杂的业务逻辑和对数据库的操作,这个时候就会用SP来封装数据库操作。如果项目的SP较多,书写又没有一定的规范
- 在多个文件或者不同语言协同的项目中,python脚本经常需要从命令行直接读取参数。万能的python就自带了argprase包使得这一工作变
- 新建项目如下图,比如sigma目录是我要上传的项目,在six-sigma目录下新建三个文件,分别是LICENSE也就是开源协议,README
- 利用python的sftp实现文件上传,可以是文件,也可以是文件夹。版本Python2.7.13 应该不用pip安装更多的插件,都是自带的不