KindEditor
1、进入官网
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、基本使用
<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', { '100%', // 文本框宽度(可以百分比或像素) height: '300px', // 文本框高度(只能像素) minWidth: 200, // 最小宽度（数字） minHeight: 400 // 最小高度（数字）
// 更多见 http://kindeditor.net/docs/option.html
}); } </script>
5、详细参数
http://kindeditor.net/docs/option.html
重点说明几个常用的解释一下：
items：配置编辑器的工具栏中显示哪些工具，其中”/”表示换行，”|”表示分隔符。 示例： items: [ 'source', '|', 'undo', 'redo', ]
noDisableItems：不禁用的工具项，需要依赖designMode:false 起效。示例：
filterMode：防范XSS攻击，对输入代码进行过滤，值为false的时候允许所有html标签。默认为true,只允许一些指定的html标签输入&保存
wellFormatMode：true时美化HTML数据。默认true
resizeType：2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
themeType：指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。默认值default
useContextmenu：true时使用右键菜单，false时屏蔽右键菜单
syncType：同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。
uploadJson：指定上传文件的服务器端程序(POST 请求url路径)。 举例：uploadJson: '/upload_file/', 上传到： http://127.0.0.1:8000/upload_file/?dir=image
allowImageUpload：true时显示图片上传按钮。
allowFlashUpload：true时显示Flash上传按钮。
allowMediaUpload：true时显示视音频上传按钮。
allowFileUpload：true时显示文件上传按钮。
allowFileManager：true时显示浏览远程服务器按钮。文件管理：默认false
autoHeightMode：值为true，并引入autoheight.js插件时自动调整高度。
fileManagerJson：指定浏览远程图片的服务器端程序。即访问文件管理的URL路径
extraFileUploadParams：上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
例如CSRF参数：
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
filePostName：指定上传文件form名称。
6、上传文件示例
django 渲染模板 html
<!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=" 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', { '100%', // 文本框宽度(可以百分比或像素) height: '300px', // 文本框高度(只能像素) minWidth: 200, // 最小宽度（数字） minHeight: 400, // 最小高度（数字） uploadJson: '/kind/upload_img/', extraFileUploadParams: { // 上传图片是需要设置。单个图片上传这里采用的是form + iframe 实现的，djanjo 处理时 form表单需要提交csrfmiddlewaretoken的csrftoken 'csrfmiddlewaretoken': '{{ csrf_token }}' }, fileManagerJson: '/kind/file_manager/', allowPreviewEmoticons: true, //允许表情预览 allowImageUpload: true //显示图片上传按钮 }); } </script> </body> </html>
django - views.py
文件上传
from django.shortcuts import render from django.shortcuts import HttpResponse from django.views import View import json import os from io import BytesIO from utils.check_code import create_validate_code # Create your views here. class UploadFile(View): def get(self, request): pass def post(self, request): """ 文件上传 :param request: :return: """ print(request.FILES) file = request.FILES.get('imgFile') SUB_DIR = request.get_full_path().split("=")[1] print(SUB_DIR) UPLOAD_BASE_DIR = 'static/upload_file/' save_uri = UPLOAD_BASE_DIR + SUB_DIR + 's/' + file.name print(save_uri) with open(save_uri, 'wb') as f: for items in file.chunks(): f.write(items) dic = { 'error': 0, // 为0表示上传无误 'url': '/' + save_uri, //返回文件地址，前端获取用来生成img标签 'message': '错误了...' } ret = HttpResponse(json.dumps(dic)) ret['X-Frame-Options'] = None //此参数默认为deny 浏览器会禁止解析展示 return ret class Kind(View): def get(self, request): return render(request, 'kindeditor/simple1.html')
文件管理
class FileManager(View): def get(self, request): dic = {} root_path = 'D:/Python3_study/s14day19_2/static/upload_file/' # 代码所在操作系统存储文件的绝对路径 static_root_path = '/static/upload_file/' # 请求url文件基础路径 request_path = request.GET.get('path') if request_path: print('获取到请求路径：', request_path) abs_current_dir_path = os.path.join(root_path, request_path) # 获取当前请求路径的上一级目录名： # 1.如果当前请求路径是第一级目录，则上一级目录为空字符串，即：文件管理根目录。 # 2.如果当前请求路径是二级以上子目录，则会有上一级目录名 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) print('current_url：', dic.get('current_url')) print('current_dir_path：', dic.get('current_dir_path')) print('moveup_dir_path：', dic.get('moveup_dir_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))
7、XSS过滤特殊标签
处理依赖
pip3 install beautifulsoup4
XSS示例
#!/usr/bin/env python # -*- coding:utf-8 -*- from bs4 import BeautifulSoup class XSSFilter(object): __instance = None def __init__(self): # XSS白名单 self.valid_tags = { "font": ['color', 'size', 'face', 'style'], 'b': [], 'div': [], "span": [], "table": [ 'border', 'cellspacing', 'cellpadding' ], 'th': [ 'colspan', 'rowspan' ], 'td': [ 'colspan', 'rowspan' ], "a": ['href', 'target', 'name'], "img": ['src', 'alt', 'title'], 'p': [ 'align' ], "pre": ['class'], "hr": ['class'], 'strong': [] } @classmethod def instance(cls): if not cls.__instance: obj = cls() cls.__instance = obj return cls.__instance def process(self, content): soup = BeautifulSoup(content, 'lxml') # 遍历所有HTML标签 for tag in soup.find_all(recursive=True): # 判断标签名是否在白名单中 if tag.name not in self.valid_tags: tag.hidden = True if tag.name not in ['html', 'body']: tag.hidden = True tag.clear() continue # 当前标签的所有属性白名单 attr_rules = self.valid_tags[tag.name] keys = list(tag.attrs.keys()) for key in keys: if key not in attr_rules: del tag[key] return soup.renderContents() if __name__ == '__main__': html = """<p class="title"> <b>The Dormouse's story</b> </p> <p class="story"> <div name='root'> Once upon a time there were three little sisters; and their names were <a href="http://example.com/elsie" class="sister c1" style='color:red;background-color:green;' id="link1"><!-- Elsie --></a> <a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and <a href="http://example.com/tillie" class="sister" id="link3">Tilffffffffffffflie</a>; and they lived at the bottom of a well. <script>alert(123)</script> </div> </p> <p class="story">...</p>""" v = XSSFilter.instance().process(html) print(v)
基于__new__实现单例模式示例
#!/usr/bin/env python # -*- coding:utf-8 -*- from bs4 import BeautifulSoup class XSSFilter(object): __instance = None def __init__(self): # XSS白名单 self.valid_tags = { "font": ['color', 'size', 'face', 'style'], 'b': [], 'div': [], "span": [], "table": [ 'border', 'cellspacing', 'cellpadding' ], 'th': [ 'colspan', 'rowspan' ], 'td': [ 'colspan', 'rowspan' ], "a": ['href', 'target', 'name'], "img": ['src', 'alt', 'title'], 'p': [ 'align' ], "pre": ['class'], "hr": ['class'], 'strong': [] } def __new__(cls, *args, **kwargs): """ 单例模式 :param cls: :param args: :param kwargs: :return: """ if not cls.__instance: obj = object.__new__(cls, *args, **kwargs) cls.__instance = obj return cls.__instance def process(self, content): soup = BeautifulSoup(content, 'lxml') # 遍历所有HTML标签 for tag in soup.find_all(recursive=True): # 判断标签名是否在白名单中 if tag.name not in self.valid_tags: tag.hidden = True if tag.name not in ['html', 'body']: tag.hidden = True tag.clear() continue # 当前标签的所有属性白名单 attr_rules = self.valid_tags[tag.name] keys = list(tag.attrs.keys()) for key in keys: if key not in attr_rules: del tag[key] return soup.renderContents() if __name__ == '__main__': html = """<p class="title"> <b>The Dormouse's story</b> </p> <p class="story"> <div name='root'> Once upon a time there were three little sisters; and their names were <a href="http://example.com/elsie" class="sister c1" style='color:red;background-color:green;' id="link1"><!-- Elsie --></a> <a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and <a href="http://example.com/tillie" class="sister" id="link3">Tilffffffffffffflie</a>; and they lived at the bottom of a well. <script>alert(123)</script> </div> </p> <p class="story">...</p>""" obj = XSSFilter() v = obj.process(html) print(v)