Django之kindeditor
1、什么是kindeditor？
KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。
2、下载
-官网下载：http://kindeditor.net/down.php
-本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
3、文件夹说明
├── asp asp示例
├── asp.net asp.net示例
├── attached 空文件夹，放置关联文件attached
├── examples HTML示例
├── jsp java示例
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js 全部JS（未压缩）
├── kindeditor-min.js 仅KindEditor JS（压缩）
├── kindeditor.js 仅KindEditor JS（未压缩）
├── lang 支持语言
├── license.txt License
├── php PHP示例
├── plugins KindEditor内部使用的插件
└── themes KindEditor主题
4、基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea name="content" id="content"></textarea>
<script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
<script>
$(function () {
initKindEditor();
});
function initKindEditor() {
var kind = KindEditor.create('#content', {
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400 // 最小高度（数字）
});
}
</script> </body>
</html>
效果显示为：
5、详细参数
http://kindeditor.net/docs/option.html
6、上传文件示例
kind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
{% csrf_token %}
<div style="width: 500px;margin: 0 auto">
<textarea id="content"></textarea>
</div>
<input type="submit" value="提交"/>
</form> <script src="/static/js/jquery-1.12.4.js"></script>
<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> <script>
$(function () { KindEditor.create('#content', {
{# items: ['superscript', 'clearhtml', 'quickformat', 'selectall']#}
{# noDisableItems: ["source", "fullscreen"],#}
{# designMode: false#}
uploadJson: '/upload_img/',
fileManagerJson: '/file_manager/',
allowImageRemote: true,
allowImageUpload: true,
allowFileManager: true,
extraFileUploadParams: {
csrfmiddlewaretoken: "{{ csrf_token }}"
},
filePostName: 'fafafa' }); })
</script> </body>
</html>
views.py
def kind(request):
return render(request, 'kind.html') def upload_img(request):
request.GET.get('dir')
print(request.FILES.get('fafafa'))
# 获取文件保存
import json
dic = { #后台向前端返回的值
'error': 0, #0表示的是正确的,1代表错误
'url': '/static/image/图片.jpg',
'message': '错误了...'
} return HttpResponse(json.dumps(dic)) import os
import time
import json
def file_manager(request):
dic = {}
root_path = 'E:/week_23_1/static'
static_root_path = '/static/'
request_path = request.GET.get('path')
if request_path:
abs_current_dir_path = os.path.join(root_path, request_path)
move_up_dir_path = os.path.dirname(request_path.rstrip('/'))
dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path else:
abs_current_dir_path = root_path
dic['moveup_dir_path'] = '' # 上一级目录 dic['current_dir_path'] = request_path #current_dir_path 指当前的路径
dic['current_url'] = os.path.join(static_root_path, request_path) file_list = [] #文件目录
for item in os.listdir(abs_current_dir_path): #listdir 就是把某一路径下的东西全部拿下来
abs_item_path = os.path.join(abs_current_dir_path, item)
a, exts = os.path.splitext(item)
is_dir = os.path.isdir(abs_item_path)
if is_dir:
temp = {
'is_dir': True, #是否是dir
'has_file': True, #目录下面是否存在文件
'filesize': 0, #文件大小是多少
'dir_path': '', #当前的路径是在哪
'is_photo': False, #是否是图片
'filetype': '', #文件的类型是什么
'filename': item, #文件名是什么
'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) #文件创始时间是什么
}
else:
temp = {
'is_dir': False,
'has_file': False,
'filesize': os.stat(abs_item_path).st_size,
'dir_path': '',
'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,
'filetype': exts.lower().strip('.'),
'filename': item,
'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
} file_list.append(temp)
dic['file_list'] = file_list
return HttpResponse(json.dumps(dic))
操作页面展示：
Django之kindeditor的更多相关文章
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- Django（九）下：Ajax操作、图片验证码、KindEditor使用
三.Ajax操作 ajax操作基于浏览器的xmlHttpRequest对象,IE低版本是另外一个对象,jQuery 1 版本对那两个对象做了封装,兼容性最好,2 .3版本不再支持IE低版本了. Aja ...
- Django 中使用kindeditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- Python开发【Django】：图片验证码、KindEditor
图片验证码 生成图片验证码需要以下: session check_code.py(依赖:Pillow,字体文件) 模块安装 pip install Pillow src属性后面加? 在utils下拷贝 ...
- python笔记-20 django进阶 （model与form、modelform对比，三种ajax方式的对比，随机验证码，kindeditor）
一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...
- django admin富文本编辑kindeditor
最近在做django项目,需要在后台管理系统加入富文本编辑 其实加入富文本编辑很简单,就是导入几个编辑器的js脚本到admin页面内,下面说说怎么做 第一步,下载想要的富文本编辑器如kindedito ...
- Django之富文本编辑器kindeditor 及上传
1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...
- Django项目开发，XSS攻击，图片防盗链，图片验证码，kindeditor编辑器
目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...
随机推荐
- 【Leetcode】72 Edit Distance
72. Edit Distance Given two words word1 and word2, find the minimum number of steps required to conv ...
- python接口自动化测试框架实现之字符串插入变量（字符串参数化）
问题: 在做接口自动化测试的时候,请求报文是json串,但是根据项目规则必须转换成字符串,然后在开头拼接“data=” 接口中很多入参值需要进行参数化. 解决方案: 1.Python并没有对在字符串中 ...
- PHP面向对象之重载
重载技术overloading 重载的基本概念 重载在“通常面向对象语言”中的含义: 是指,在一个类(对象)中,有多个名字相同但形参不同的方法的现象: 类似这样: class C{ functio ...
- UVA11653_Buses
这个题目很有意思,一不小心就会让人坑在里面. 题意是这样的,给你n,k,l.分别表示总共的长度,长度为5和10的车的不同颜色数量现在问你要把n的填满有多少种方案. 很多人一开始都会脑子一根筋地想用排列 ...
- C 程序结构——Day01
C Hello World 实例 C 程序主要包括以下部分: 预处理器指令 函数 变量 语句 & 表达式 注释 让我们看一段简单的代码,可以输出单词 "Hello World&quo ...
- 洛谷 P1231 教辅的组成（网络最大流+拆点加源加汇）
题目背景 滚粗了的HansBug在收拾旧语文书,然而他发现了什么奇妙的东西. 题目描述 蒟蒻HansBug在一本语文书里面发现了一本答案,然而他却明明记得这书应该还包含一份练习题.然而出现在他眼前的书 ...
- oracle 如何查看pga
进去命令行 输入 sqlplus username/password@dbname 回车 进入数据库输入 show parameter pga 回车
- 《Java程序设计》第8周学习总结 20165218 2017-2018-1
20165218 2017-2018-1 <Java程序设计>第8周学习总结 教材学习内容总结 第12章 java多线程机制 java中的线程 计算机在任何给定时刻只能执行一个线程,多线程 ...
- 【数论】数论进阶-Preknowledge
数论进阶-Preknowledge 参考资料:洛谷网校2018夏季省选基础班SX-3数论进阶课程及课件 一.整除与取整除法 1.1 定义 1.整除 \(\forall~x,y~\in~Z^+,\) 若 ...
- 【树状数组】【P3902】 递增
传送门 Description 给你一个长度为\(n\)的整数数列,要求修改最少的数字使得数列单调递增 Input 第一行为\(n\) 第二行\(n\)个数代表数列 Output 输出一行代表答案 H ...