1、进入官网
2、下载
- 官网下载：http://kindeditor.net/down.php
- 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
3、文件夹说明：
1 ├── asp asp示例 2 ├── asp.net asp.net示例 3 ├── attached 空文件夹，放置关联文件attached 4 ├── examples HTML示例 5 ├── jsp java示例 6 ├── kindeditor-all-min.js 全部JS（压缩） 7 ├── kindeditor-all.js 全部JS（未压缩） 8 ├── kindeditor-min.js 仅KindEditor JS（压缩） 9 ├── kindeditor.js 仅KindEditor JS（未压缩） 10 ├── lang 支持语言 11 ├── license.txt License 12 ├── php PHP示例 13 ├── plugins KindEditor内部使用的插件 14 └── themes KindEditor主题
4、基本使用
1 <textarea name="content" id="content"></textarea> 2 3 <script src="/static/jquery-1.12.4.js"></script> 4 <script src="/static/plugins/kind-editor/kindeditor-all.js"></script> 5 <script> 6 $(function () { 7 initKindEditor(); 8 }); 9 10 function initKindEditor() { 11 var kind = KindEditor.create('#content', { 12 '100%', // 文本框宽度(可以百分比或像素) 13 height: '300px', // 文本框高度(只能像素) 14 minWidth: 200, // 最小宽度（数字） 15 minHeight: 400 // 最小高度（数字） 16 }); 17 } 18 </script>
1 <script> 2 $(function () { 3 4 KindEditor.create('#content', { 5 {# items: ['superscript', 'clearhtml', 'quickformat', 'selectall']#} 6 {# noDisableItems: ["source", "fullscreen"],#} 7 {# designMode: false#} 8 uploadJson: '/upload_img/', 9 fileManagerJson: '/file_manager/', 10 allowImageRemote: true, 11 allowImageUpload: true, 12 allowFileManager: true, 13 extraFileUploadParams: { 14 csrfmiddlewaretoken: "{{ csrf_token }}" 15 }, 16 filePostName: 'fafafa' 17 18 }); 21 }) 22 </script>
5、详细参数
http://kindeditor.net/docs/option.html
6、上传文件并展示
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div> 10 <h1>文章内容</h1> 11 {{ request.POST.content|safe }} 12 </div> 13 14 15 <form method="POST"> 16 <h1>请输入内容：</h1> 17 {% csrf_token %} 18 <div style=" 500px; margin: 0 auto;"> 19 <textarea name="content" id="content"></textarea> 20 </div> 21 <input type="submit" value="提交"/> 22 </form> 23 24 <script src="/static/jquery-1.12.4.js"></script> 25 <script src="/static/plugins/kind-editor/kindeditor-all.js"></script> 26 <script> 27 $(function () { 28 initKindEditor(); 29 }); 30 31 function initKindEditor() { 32 var a = 'kind'; 33 var kind = KindEditor.create('#content', { 34 '100%', // 文本框宽度(可以百分比或像素) 35 height: '300px', // 文本框高度(只能像素) 36 minWidth: 200, // 最小宽度（数字） 37 minHeight: 400, // 最小高度（数字） 38 uploadJson: '/kind/upload_img/', 39 extraFileUploadParams: { 40 'csrfmiddlewaretoken': '{{ csrf_token }}' 41 }, 42 fileManagerJson: '/kind/file_manager/', 43 allowPreviewEmoticons: true, 44 allowImageUpload: true 45 }); 46 } 47 </script> 48 </body> 49 </html>
1 import os 2 import json 3 import time 4 5 from django.shortcuts import render 6 from django.shortcuts import HttpResponse 7 8 9 def index(request): 10 """ 11 首页 12 :param request: 13 :return: 14 """ 15 return render(request, 'index.html') 16 17 18 def upload_img(request): 19 """ 20 文件上传 21 :param request: 22 :return: 23 """ 24 dic = { 25 'error': 0, 26 'url': '/static/imgs/20130809170025.png', 27 'message': '错误了...' 28 } 29 30 return HttpResponse(json.dumps(dic)) 31 32 33 def file_manager(request): 34 """ 35 文件管理 36 :param request: 37 :return: 38 """ 39 dic = {} 40 root_path = '/Users/wupeiqi/PycharmProjects/editors/static/' 41 static_root_path = '/static/' 42 request_path = request.GET.get('path') 43 if request_path: 44 abs_current_dir_path = os.path.join(root_path, request_path) 45 move_up_dir_path = os.path.dirname(request_path.rstrip('/')) 46 dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path 47 48 else: 49 abs_current_dir_path = root_path 50 dic['moveup_dir_path'] = '' 51 52 dic['current_dir_path'] = request_path 53 dic['current_url'] = os.path.join(static_root_path, request_path) 54 55 file_list = [] 56 for item in os.listdir(abs_current_dir_path): 57 abs_item_path = os.path.join(abs_current_dir_path, item) 58 a, exts = os.path.splitext(item) 59 is_dir = os.path.isdir(abs_item_path) 60 if is_dir: 61 temp = { 62 'is_dir': True, 63 'has_file': True, 64 'filesize': 0, 65 'dir_path': '', 66 'is_photo': False, 67 'filetype': '', 68 'filename': item, 69 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 70 } 71 else: 72 temp = { 73 'is_dir': False, 74 'has_file': False, 75 'filesize': os.stat(abs_item_path).st_size, 76 'dir_path': '', 77 'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False, 78 'filetype': exts.lower().strip('.'), 79 'filename': item, 80 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path))) 81 } 82 83 file_list.append(temp) 84 dic['file_list'] = file_list 85 return HttpResponse(json.dumps(dic))