目录：
- 1.1 kindEditor常用配置参数
- 1.2 kindEditor下载与文件说明
- 1.3 kindEditor实现上传图片、文件、及文件空间管理
1.1 kindEditor常用配置参数 返回顶部
1. kindEditor常用配置
1、width： 编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高
2、height： 编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。
3、minWidth： 指定编辑器最小宽度，单位为px。默认值: 650
4、minHeight： 指定编辑器最小高度，单位为px。默认值: 100
5、items： 配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。未指定表示显示所有工具栏
6、noDisableItems： designMode 为false时，要保留的工具栏图标。默认值: [‘source’, ‘fullscreen’]
2. kindEditor与上传相关配置
1、useContextmenu ： true时使用右键菜单，false时屏蔽右键菜单。
2、syncType ： 值为空时，提交form表单时不会同步提交kindEditor中内容
3、uploadJson ： 指定上传文件的服务器端程序路径
4、allowImageUpload ： true时显示本地图片上传按钮。
5、allowImageRemote ： 是否允许通过url远程上传图片
6、autoHeightMode ： 值为true，并引入autoheight.js插件时自动调整高度。
7、extraFileUploadParams：上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
8、filePostName ： 指定上传文件form名称
9、fileManagerJson ： 指定浏览远程图片的服务器端程序路径
allowFileManager ： true时显示浏览远程服务器按钮，上面的fileManagerJson才会生效
1.2 kindEditor下载与文件说明 返回顶部
1、kindEditor插件下载
1. kindEditor官网: http://kindeditor.net/demo.php
2. 本地下载KindEditor:
2、文件夹说明
├── 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主题kindEditor文件夹说明
<textarea name="content" id="content"></textarea>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
$(function () {
initKindEditor();
});
function initKindEditor() {
var kind = KindEditor.create('#content', {
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400 // 最小高度（数字）
});
}
</script>基本使用
1.3 kindEditor实现上传图片、文件、及文件空间管理 返回顶部
1、代码
1、使用kindEditor需要下载kindEditor插件包放到/project/static/ kindeditor 目录下
2、然后在 templates/kind.html 配置使用kindEditor
3、在views.py中定义了两个函数：upload_img、file_manager
upload_img： 用来处理用户提交的文件（比如保存到服务器端）
file_manager： 文件空间管理的处理函数，作用是浏览服务器端某一个文件夹下的所有文件
urlpatterns = [
# url(r'^upload_file/$', views.upload_file),
url(r'^kind/$', views.kind),
url(r'^upload_img/$', views.upload_img),
url(r'^file_manager/$', views.file_manager),
]urls.py
from django.shortcuts import HttpResponse,render
import os,time,json
def kind(request):
return render(request,'kind.html')
#1、作用：获取上传的图片、文件等
def upload_img(request):
print('file_type',request.GET.get('dir')) #获取上传类型，图片，文件，flash等
print('file',request.POST.get('kind_text')) #获取输入框中内容
print('fafa',request.FILES.get('fafafa')) #获取上传的文件或图片
# 获取文件保存到我们服务器本地，然后把路径返回到前端就能实现预览效果：省略
# 按照dic这个格式将对应内容返回，前端就会看到预览效果
dic = {
'error': 0,
'url': '/static/imgs/aa.jpg', #这里路径写什么，前端预览的图片就是什么
'message': '错误了...'
}
return HttpResponse(json.dumps(dic))
#2、作用：文件空间管理的处理函数
def file_manager(request):
dic = {} #这个dic就是最终返回给用户的
root_path = 'C:/Users/tom/PycharmProjects/myCutPage/static' #root_path：空间管理时显示此路径的所有文件
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 #当前看到的路径
dic['current_url'] = os.path.join(static_root_path, request_path)
file_list = []
for item in os.listdir(abs_current_dir_path):
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, #是否是文件夹
'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))views.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="POST" action="/upload_img/">
<div style="width: 500px;margin: 0 auto">
<textarea id="content" name="kind_text"></textarea>
</div>
<input type="submit" value="提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script>
$(function () {
initKindEditor();
});
// KindEditor.create用来创建编辑框，#conten是多行文本编辑的id
function initKindEditor() {
var kind = KindEditor.create('#content', {
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400, // 最小高度（数字）
//items:['source', 'undo',], //定制只显示某些功能,默认全部显示
//noDisableItems:['source','fullscreen'], //指定仅开启的功能
//designMode:false, //noDisableItems使用还要加上这个参数
uploadJson:'/upload_img/', //指定数据提交路径
fileManagerJson:'/file_manager/', //这两句用来配置 空间管理
allowFileManager:true, //空间管理处理函数是：file_manager
extraFileUploadParams:{ //添加别的参数一并传到服务器
csrfmiddlewaretoken:"{{ csrf_token }}" //csrf
},
filePostName:'fafafa' //后台可以request.FILES.get('fafafa')获取
});
}
</script>
</body>
</html>kind.html
2、upload_img函数实现上传文件效果图
3、file_manager函数实现文件空间管理效果图
1、返回给用户的字典内容说明
'''
最后返回给用户的字典内容如下
{
moveup_dir_path:上一级目录,
current_dir_path: 当前所在目录,
current_url: 如果是图片可以直接预览，这里就是对应图片路径,
file_list: 时一个列表，列表中有很多字典，就是下面temp字典的格式
}
'''返回给用户的字典内容说明
2、文件空间管理使用效果1： 当我们点击文件上传时可以看到一个新功能：图片空间
3、文件空间管理使用效果2：点击“图片空间”就可以看到我们设置路径下的文件了
