前端⽂本框插件KindEditor
1、
2、下载
官⽹下载：kindeditor/down.php
本地下载：filesblogs/files/wupeiqi/kindeditor_a5.zip
3、⽂件夹说明
├── asp asp⽰例
├── asp asp⽰例
├── 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
├── 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 = ate('#content', {
width: '100%', // ⽂本框宽度(可以百分⽐或像素)
height: '300px', // ⽂本框⾼度(只能像素)
minWidth: 200, // 最⼩宽度（数字）
minHeight: 400 // 最⼩⾼度（数字）
// 更多见 kindeditor/docs/option.html
});
}
</script>
5、详细参数
重点说明⼏个常⽤的解释⼀下：
：配置编辑器的⼯具栏中显⽰哪些⼯具，其中”/”表⽰换⾏，”|”表⽰分隔符。⽰例：items: [ 'source', '|',
'undo', 'redo', ]
docker上运行win10 ：不禁⽤的⼯具项，需要依赖:false 起效。⽰例：
：防范XSS攻击，对输⼊代码进⾏过滤，值为false的时候允许所有html标签。默认为true，只允许⼀些指定的html标签输⼊&保存 ：true时美化HTML数据。默认true
：2或1或0，2时可以拖动改变宽度和⾼度，1时只能改变⾼度，0时不能拖动。
：指定主题风格，可设置”default”、”simple”，指定simple时需要引⼊simple.css。默认值default
：true时使⽤右键菜单，false时屏蔽右键菜单
：同步数据的⽅式，可设置”“、”form”，值为form时提交form时⾃动同步，空时不会⾃动同步。
：true时显⽰图⽚上传按钮。
：true时显⽰Flash上传按钮。
：true时显⽰视⾳频上传按钮。
：true时显⽰⽂件上传按钮。
：true时显⽰浏览远程服务器按钮。⽂件管理：默认false
：值为true，并引⼊autoheight.js插件时⾃动调整⾼度。
：指定浏览远程图⽚的服务器端程序。即访问⽂件管理的URL路径
：上传图⽚、Flash、视⾳频、⽂件时，⽀持添加别的参数⼀并传到服务器。
例如CSRF参数：
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
：指定上传⽂件form名称。
6、上传⽂件⽰例
django 渲染模板 html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<h1>⽂章内容</h1>
{{ t|safe }}
</div>
<form method="POST">
<h1>请输⼊内容：</h1>
{% csrf_token %}
<div >
<textarea name="content" id="content"></textarea>
</div>
<input type="submit" value="提交"/>
</form>php开源后台管理系统
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
<script>
$(function () {
initKindEditor();
});
function initKindEditor() {
css虚线样式怎么设置var a = 'kind';
var kind = ate('#content', {
width: '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 = ('imgFile')
SUB_DIR = _full_path().split("=")[1]
print(SUB_DIR)
java的接口是什么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 = ('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：', ('current_url'))
print('current_dir_path：', ('current_dir_path'))
print('moveup_dir_path：', ('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', ime(ime(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', ime(ime(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': [],
weblogic 11g 不到 路径"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]
derContents()
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="example/elsie" class="sister c1" style='color:red;background-color:green;' id="link1"><!-- Elsie --></a>
<a href="example/lacie" class="sister" id="link2">Lacie</a> and
<a href="example/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:
jquery下载文件请求: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]
derContents()
if__name__ == '__main__':
html = """<p class="title">
<b>The Dormouse's story</b>
</p>
<p class="story">
<div name='root'>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论