python - web开发之KindEditor编辑器
KindEditor
1、官网
3、KindEditor下载安装后的文件夹说明
├── 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主题
ps:asp，asp.net，jsp，php， examples，examples都可以删除掉
4、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>
PS:更多详细参数使用说明
5、文件上传示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form> 9 {% csrf_token %} 10 <div style="width: 500px;margin: 0 auto"> 11 <textarea id="content"></textarea> 12 </div> 13 <input type="submit" value="提交"/> 14 </form> 15 16 <script src="/static/jquery-1.12.4.js"></script> 17 <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> 18 \ 19 <script> 20 $(function () { 21 22 KindEditor.create('#content', { 23 {# items: ['superscript', 'clearhtml', 'quickformat', 'selectall']#} <!--配置编辑器的工具栏显示的工具--> 24 {# noDisableItems: ["source", "fullscreen"],#} <!--与designMode搭配使用，designMode 为false时，要保留的工具栏图标--> 25 {# designMode: false#} 26 uploadJson: '/upload_img/', <!--指定上传文件的服务器端程序--> 27 fileManagerJson: '/file_manager/', <!--指定浏览远程图片的服务器端程序--> 28 allowImageRemote: true, <!--true时显示网络图片标签，false时不显示--> 29 allowImageUpload: true, <!--true时显示图片上传按钮。--> 30 allowFileManager: true, <!--true时显示浏览远程服务器按钮。--> 31 extraFileUploadParams: { <!--上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。--> 32 csrfmiddlewaretoken: "{{ csrf_token }}" 33 }, 34 <!--指定上传文件form名称--> 35 filePostName: 'fafafa' 36 37 }); 38 39 40 }) 41 </script> 42 43 </body> 44 </html>
1 def kind(request): 2 return render(request, 'kind.html') 3 4 def upload_img(request): 5 request.GET.get('dir') 6 print(request.FILES.get('fafafa')) 7 # 获取文件保存 8 import json 9 dic = { 10 'error': 0, 11 'url': '/static/imgs/20130809170025.png', 12 'message': '错误了...' 13 } 14 15 return HttpResponse(json.dumps(dic)) 16 import os 17 import time 18 import json 19 def file_manager(request): 20 """ 21 文件管理 22 :param request: 23 :return: 24 { 25 moveup_dir_path: 26 current_dir_path: 27 current_url: 28 file_list: [ 29 { 30 'is_dir': True, 31 'has_file': True, 32 'filesize': 0, 33 'dir_path': '', 34 'is_photo': False, 35 'filetype': '', 36 'filename': xxx.png, 37 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 38 }, 39 { 40 'is_dir': True, 41 'has_file': True, 42 'filesize': 0, 43 'dir_path': '', 44 'is_photo': False, 45 'filetype': '', 46 'filename': xxx.png, 47 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 48 } 49 ] 50 51 } 52 53 54 """ 55 dic = {} 56 root_path = 'C:/Users/Administrator/PycharmProjects/day24/static/' 57 static_root_path = '/static/' 58 request_path = request.GET.get('path') 59 if request_path: 60 abs_current_dir_path = os.path.join(root_path, request_path) 61 move_up_dir_path = os.path.dirname(request_path.rstrip('/')) 62 dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path 63 64 else: 65 abs_current_dir_path = root_path 66 dic['moveup_dir_path'] = '' 67 68 dic['current_dir_path'] = request_path 69 dic['current_url'] = os.path.join(static_root_path, request_path) 70 71 file_list = [] 72 for item in os.listdir(abs_current_dir_path): 73 abs_item_path = os.path.join(abs_current_dir_path, item) 74 a, exts = os.path.splitext(item) 75 is_dir = os.path.isdir(abs_item_path) 76 if is_dir: 77 temp = { 78 'is_dir': True, 79 'has_file': True, 80 'filesize': 0, 81 'dir_path': '', 82 'is_photo': False, 83 'filetype': '', 84 'filename': item, 85 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 86 } 87 else: 88 temp = { 89 'is_dir': False, 90 'has_file': False, 91 'filesize': os.stat(abs_item_path).st_size, 92 'dir_path': '', 93 'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False, 94 'filetype': exts.lower().strip('.'), 95 'filename': item, 96 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 97 } 98 99 file_list.append(temp) 100 dic['file_list'] = file_list 101 return HttpResponse(json.dumps(dic))
