1.官网：http://kindeditor.net/doc.php
2.下载：http://kindeditor.net/down.php
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.开始使用
<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>
5.初始化参数：http://kindeditor.net/docs/option.html
6.上传文件
默认上传地址：js文件路径+/php/upload_json.php
修改初始参数uploadJson改变上传url：uploadJson:’/upload/’
默认本地上传文件名：imgFile，可通过filePostName设置
服务端返回数据格式：
dic = { 'error': 0,#0表示没用错误，1代表错误 'url': '/static/imgs/20130809170025.png',#图片url 'message': '成功' }
示例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div> <h1>文章内容</h1> {{ request.POST.content|safe }} </div> <form method="POST"> <h1>请输入内容：</h1> {% csrf_token %} <div style="width: 500px; margin: 0 auto;"> <textarea name="content" id="content"></textarea> </div> <input type="submit" value="提交"/> </form> <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 a = 'kind'; var kind = KindEditor.create('#content', { width: '100%', // 文本框宽度(可以百分比或像素) height: '300px', // 文本框高度(只能像素) minWidth: 200, // 最小宽度（数字） minHeight: 400, // 最小高度（数字） uploadJson: '/kind/upload_img/', extraFileUploadParams: { 'csrfmiddlewaretoken': '{{ csrf_token }}' }, fileManagerJson: '/kind/file_manager/', allowPreviewEmoticons: true, allowImageUpload: true }); } </script> </body> </html>
服务端处理：
import os import json import time from django.shortcuts import render from django.shortcuts import HttpResponse def index(request): """ 首页 :param request: :return: """ return render(request, 'index.html') def upload_img(request): """ 文件上传 :param request: :return: """ dic = { 'error': 0, 'url': '/static/imgs/20130809170025.png', 'message': '错误了...' } return HttpResponse(json.dumps(dic)) def file_manager(request): """ 文件管理 :param request: :return: """ dic = {} root_path = '/editors/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 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))
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12453.html