正文
KindEditor echarts
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
导入
<link rel="stylesheet" href="/static/plugins/kindeditor-4.1.10/themes/default/default.css"/>
<script charset="utf-8" src="/static/plugins/kindeditor-4.1.10/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor-4.1.10/lang/zh_CN.js"></script>
1、进入官网
2、下载
- 官网下载：http://kindeditor.net/down.php
- 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
├── 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>
var kind = null;
function initKindEditor() {
kind = KindEditor.create('#content', {
resizeType: 1,
width: '100%', // 文本框宽度(可以百分比或像素)
themeType: 'simple',
allowPreviewEmoticons: false,
height: '200px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 200, // 最小高度（数字）
allowImageUpload:true,
uploadJson: '/mentor/Follow-up-img',
filePostName:"",
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'code', 'link']
});
}
<script src="{% static 'mentor/plugins/kindeditor-4.1.10/kindeditor-all.js' %}"></script>
<script>
$(function () {
initKindEditor();
});
var kind = null;
function initKindEditor() {
kind = KindEditor.create('#content', {
resizeType: 1,
width: '100%', // 文本框宽度(可以百分比或像素)
themeType: 'simple',
allowImageUpload:true,
allowPreviewEmoticons: true,
formatUploadUrl:false,
height: '500px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 250, // 最小高度（数字）
uploadJson: '/manage/article/img/',
afterBlur: function(){this.sync();},
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
}
</script>
可支持复制图片功能
var kind = null;
function initKindEditor() {
kind = KindEditor.create('#content', {
resizeType: 1,
width: '700px', // 文本框宽度(可以百分比或像素)
themeType: 'simple',
allowImageUpload: true,
filePostName:'file',
allowPreviewEmoticons: true,
allowImageRemote: false,
pasteType:2,
wellFormatMode:true,
filterMode:false,
designMode:true,
formatUploadUrl: true,
fullscreenShortcut: true,
height: '400px', // 文本框高度(只能像素)
minWidth: 100, // 最小宽度（数字）
minHeight: 250, // 最小高度（数字）
uploadJson: '/mentor/{{ eid }}/follow_up_imgs/',
afterChange: function () {
if (this.html().replace(/\s/g, "").replace(/\//ig, "") != $("#content").html().replace(/\s/g, "").replace(/\//ig, "")) {
auth_flag = true;
}
},
afterBlur: function () {
this.sync();
},
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}', 'types': 'content'
},
afterCreate:function() {
var editerDoc = this.edit.doc;//得到编辑器的文档对象
//监听粘贴事件, 包括右键粘贴和ctrl+v
$(editerDoc).bind('paste', null, function (e) {
/*获得操作系统剪切板里的项目，e即kindeditor,
*kindeditor创建了originalEvent(源事件)对象，
*并指向了浏览器的事件对象，而chrome浏览器
*需要通过clipboardData(剪贴板数据)对象的items
*获得复制的图片数据。
*/
var ele = e.originalEvent.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//判断文件类型
if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
var file = ele[i].getAsFile();//得到二进制数据
//创建表单对象，建立name=value的表单数据。
var formData = new FormData();
formData.append("file",file);//name,value //用jquery Ajax 上传二进制数据
$.ajax({
url : '/mentor/{{ eid }}/follow_up_imgs/',
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
dataType:"json",
beforeSend:function(){
//console.log("正在进行，请稍候");
},
success : function(responseStr) {
//上传完之后，生成图片标签回显图片，假定服务器返回url。
var src = responseStr.url; var imgTag = "<img src='"+src+"'/>";
//console.info(imgTag);
//kindeditor提供了一个在焦点位置插入HTML的函数，调用此函数即可。
kind.insertHtml(imgTag);
},
error : function(responseStr) {
console.log("error");
}
}); } } });
},
items: [
'fontname', 'preview', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'selectall', 'removeformat','cut','copy','paste','plainpaste','wordpaste','selectall' ,'|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link', 'unlink', 'undo', 'redo', 'lineheight', 'fullscreen'],
resizeMode: 0 });
}
5、详细参数
http://kindeditor.net/docs/option.html
6、上传文件示例
<!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>
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 = '/Users/wupeiqi/PycharmProjects/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))
View
7、XSS过滤特殊标签
处理依赖
pip3 install beautifulsoup4
#!/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)
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': []
} 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)
基于__new__实现单例模式示例
echarts
<script src="{% static 'mentor/plugins/js/echarts.js' %}"></script>
<script>
$(function () {
bindDegreeCourse();
bindStudent();
bindCourse();
bindSchedule();
bindget_answer();
bindRecentTrends();
});
function bindDegreeCourse() {
$("#degreecourse").change(function () {
var degreecourse_id=$(this).val();
window.location.href="/manage/get_mentor_management/"+"{{ nid }}"+"/?degreecourse_id="+degreecourse_id;
})
}
function bindChart(myChart,option,chartType) {
var degreecourse_id = $("#degreecourse").val();
$.ajax({
url: '',
type: 'POST',
dataType: 'json',
data: {
chartType: chartType,
degreecourse_id:degreecourse_id,
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (response) {
if (response.status) {
if (chartType == "student") {
option.series[0]['data'] = response.result;
myChart.setOption(option);
}
else if(chartType == "get_course") {
var courseList = [];
var courseNum = [];
$.each(response.result, function (k, v) {
courseList.push(k);
courseNum.push(v);
});
option.xAxis[0]['data'] = courseList;
option.series[0]['data'] = courseNum;
myChart.setOption(option);
}
else if(chartType == "get_answer") {
option.series[0]['data'] = response.result;
myChart.setOption(option);
}
else if (chartType == "recent_trends"){
var courseList = [];
var courseNum = [];
$.each(response.result, function (k, v) {
{# console.log(k,v)#}
courseList.push(k);
courseNum.push(v);
});
console.log(response.result.row);
option.xAxis[0]['data'] = response.result.xAxis;
option.series[0]['data'] = response.result.responce.map(function (item) {return item[1];});
option.series[1]['data'] = response.result.responce2.map(function (item) {return item[1];});
option.series[2]['data'] = response.result.responce3.map(function (item) {return item[1];});
myChart.setOption(option);
}
else {
var courseList = [];
var courseNum_list = [];
var courseNum = {};
$.each(response.result, function (k, v) {
courseList.push(k);
$.each(v,function (key,val) {
if (key in courseNum){
courseNum[key].push(val)
}else {
courseNum[key]=[val]
}
});
});
option.xAxis[0]['data'] = courseList;
var count=0;
$.each(courseNum,function (k,v) {
option.series[count]['data'] = v;
count+=1
});
myChart.setOption(option);
}
} else {
}
}
});
}
function bindStudent() {
var myChart = echarts.init(document.getElementById('my_student'));
var option = {
color: ['#3398DB'],
title: {
text: '我的学员总数'
},
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['学员总数', '在学中', '毕业', '休学', '其它'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
name: '学员人数',
type: 'value',
max: 10,
interval: 2
}
],
series: [
{
name: '',
type: 'bar',
showAllSymbol: true,
barWidth: '40%',
data: []
}
]
};
bindChart(myChart,option,"student")
}
function bindCourse() {
var myChart = echarts.init(document.getElementById('my_course'));
var option = {
color: ['#3398DB'],
title: {
text: '学员模块分布'
},
tooltip: {
trigger: 'item',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
{# trigger: 'item',#}
{# formatter: '{a} <br/>{b} : {c}%',#}
{# axisPointer : {#}
{# type : 'shadow'#}
{# },#}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis:
[{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
},
splitNumber: 15
}
],
yAxis: [
{
name: '学员人数',
type: 'value',
max: 10,
interval: 2
}
],
series: [
{
name: '人数',
type: 'bar',
barWidth: '25%',
data: []
}
]
};
bindChart(myChart,option,"get_course")
}
function bindget_answer() {
var myChart = echarts.init(document.getElementById('get_answer'));
var option = {
title : {
text: '学员问题与导师回答',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['待解答','已解答','已关闭']
},
series : [
{
name: '问题分布',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:234, name:'已关闭'},
{value:310, name:'已解答'},
{value:335, name:'待解答'},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
{# myChart.setOption(option);#}
bindChart(myChart,option,"get_answer")
}
function bindSchedule() {
var myChart = echarts.init(document.getElementById('my_schedule'));
option = {
title: {
text: '学生学习进度',
left: 'center'
},
tooltip: {
trigger: 'item',//点
formatter: '{a} <br/>{b} : {c}%',
axisPointer : {
type : 'shadow'
},
},
legend: {
left: 'left',
data: ['建议进度', '实际进度']
},
xAxis: [{
type: 'category',
name: '名字',
splitLine: {show: false},
data: ['一', '二', '三', '四', '五', '六', '七', '八', '九']
}
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
name: '进度',
axisLabel:{
formatter: function(val){
return val+"%";
}
}
},
series: [
{
name: '建议进度',
type: 'line',
data: [5, 70, 9, 27, 81, 247],
itemStyle : {
normal: {
label : {show: true},
}
}
},
{
name: '实际进度',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
itemStyle : { normal: {label : {show: true}}}
}
]
};
bindChart(myChart,option,"get_schedule")
}
function bindRecentTrends() {
var myChart = echarts.init(document.getElementById('recent_trends')); //找到要渲染的标签
option = {
title: {
text: '进30天导师状态',
left: 'center' //展示地方
},
tooltip: {
trigger: 'item', //点
formatter: '{a} <br/>{b} : {c}'+'次', //悬浮
},
dataZoom: [
{
type: 'inside' //放大缩小
}
],
legend: {
left: 'left',
data: ['回答','作业', '跟进']
},
xAxis: [{
type: 'category', //传数据
name: '日期',
splitLine: {show: false},
data: [],
axisLabel:{interval:0,rotate:30}, //展示全部 //倾斜
axisTick:{show:false},
}
],
grid: {
left: '3%',
right: '4%',
bottom: 25, //下边距
containLabel: true
},
yAxis: {
type: 'value',
name: '数量 (个)',
},
series: [
{
name: '回答',
type: 'line',
data: [],
itemStyle : {normal: {label : {show: true}}},
},
{
name: '作业',
type: 'line',
data: [],
itemStyle : { normal: {label : {show: true}}}
},
{
name: '跟进',
type: 'line',
data: [],
itemStyle : { normal: {label : {show: true}}}
}
]
};
bindChart(myChart,option,"recent_trends");
//myChart.setOption(option); //渲染
} </script>
