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', {
'100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400 // 最小高度（数字）
});
}
</script>
var kind = null; function initKindEditor() { kind = KindEditor.create('#content', { resizeType: 1, '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,
'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,
'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=" 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: { '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 = '/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))
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)
#!/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)
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>