1 官网：http://kindeditor.net/doc.php
2 文件夹说明：
├── 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主题
3 基本使用
1 <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> 2 <script> 3 KindEditor.create('#i1',{ 4 '300px', 5 height:'200px', 6 items:['source','indent','bold','image','link'], 7 filterMode:true, 8 htmlTags:{ span : ['.color', '.background-color' ]}, 9 resizeType:2, 10 themeType:'default', 11 designMode:false, 12 noDisableItems:['source','bold'], 13 {# 自定义上传文件的名字，路径，额外的参数#} 14 filePostName:'fafafa', 15 uploadJson:'/upload_img.html', 16 extraFileUploadParams:{ 17 'csrfmiddlewaretoken':'{{ csrf_token }}' 18 } 19 }) 20 </script>
4 详细参数
http://kindeditor.net/doc3.php?cmd=config
5 评论框示例
1 <div class="commentarea2"> 2 <h4>发表评论</h4> 3 <form novalidate> 4 昵称： 5 <input type="text" value="{{ dict.username }}" class="hide i1"> 6 <input type="text" value="" class="hide i2"> 7 <textarea id="content"></textarea> 8 <input id='i3' type="submit" value="提交评论"> 9 <a href="/exit/" class="hide a1">退出</a> 10 <a href="/login/" class="hide a2">登录</a> 11 </form> 12 </div> 13 14 15 <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> 16 <script> 17 $(function(){ 18 if($('.i1').val()=='None'){ 19 $('.i2').removeClass('hide'); 20 $('.a2').removeClass('hide'); 21 }else{ 22 $('.i1').removeClass('hide'); 23 $('.a1').removeClass('hide'); 24 } 25 }） 26 27 KindEditor.create('#content',{ 28 '50%', 29 height:'50px', 30 resizeType:0, 31 items:['source','indent','bold','image','link'], 32 filePostName:'fafafa', 33 uploadJson:'/upload_img.html', 34 extraFileUploadParams:{'csrfmiddlewaretoken':'{{ csrf_token }}'}, 35 afterBlur: function(){this.sync();} 36 }); 37 38 $('#i3').click(function(){ 39 var comment=$('#content').val(); 40 alert(comment); 41 var article_id=$('#article_id').val(); 42 $.ajax({ 43 url:'/add_comment.html', 44 type:'post', 45 data:{'username':'{{ dict.username }}','article_id':article_id,'comment':comment,'csrfmiddlewaretoken':'{{ csrf_token }}'}, 46 dataType:'JSON', 47 success:function (data) { 48 alert(data); 49 location.reload(); 50 } 51 }) 52 }) 53 </script>
1 def upload_img(request): 2 upload_type=request.GET.get('dir') #查看上传过来的文件类型 3 file_obj=request.FILES.get('fafafa') 4 file_path=os.path.join('static/img',file_obj.name) 5 with open(file_path,'wb') as f: 6 for chunk in file_obj.chunks(): 7 f.write(chunk) 8 #返回编辑器认识的数据类型（图片保存的路径） 9 dic = { 10 'error': 0, 11 'url': '/' + file_path, 12 'message': '错误了...' 13 } 14 15 return HttpResponse(json.dumps(dic))
6
提交文章评论时，尽量用form表单提交，会自动刷新网页，更新评论楼
利用ajax提交需要设置kindeditor，并且也需要在ajax中设置刷新本网页ajax location.href()
利用kindeditor装饰textarea时，
form表单提交时from表单会自动从kindeditor中获取textarea的值
但是用jquery提交数据时，需要添加 KindEditor.create('',{ afterBlur: function(){this.sync();} })
目的是在editor失去焦点时，执行一个函数，将editor获取的值同步到textarea中
应用场景：添加新随笔，评论
提交文件的内部原理是：该插件会自动生成一个iframe标签，上传图片时利用伪ajax提交数据
前端：<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
KindEditor.create('#i1',{
filePostName:'fafafa', 指定上传的文件的名字
uploadJson:'/upload_img.html', 指定上传文件的路径
extraFileUploadParams:{ 指定上传文件所带的额外的参数（伪ajax携带CSRF）
'csrfmiddlewaretoken':'{{ csrf_token }}'
}
})
后端：
request.GET.get('dir') 查看上传过来的文件类型
dic={ 返回kindeditor认识的数据类型（可进行预览）
'error':0,
'url':'/'+filepath,
'message':'错误'
}
7 xss过滤特殊标签
beautifulsoup
highchart :
- 全局配置 Highcharts.setOptions({ global: { useUTC: false } }); - 主配置 var chart = new Highcharts.Chart('id1', { title: { text: '不同城市的月平均气温', x: 0 }, subtitle: { text: '数据来源: WorldClimate.com', x: 0 }, chart: { events: { load: function (e) { // 图标加载时，执行的函数 } } }, credits: { enable: true, position: { align: 'right', verticalAlign: 'bottom' }, text: '老男孩', href: 'http://www.oldboyedu.com' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 1 }, xAxis: { // categories: ['1.1', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], type: 'datetime', labels: { formatter: function () { return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value); }, rotation: 30 } }, yAxis: { title: { text: '数值' } }, tooltip: { valueSuffix: '个', xDateFormat: "%Y-%m-%d %H:%M:%S", pointFormatter: function (e) { var tpl = '<span style="color:' + this.series.color + '">●</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>'; return tpl; }, valueDecimals: 1, useHTML: true }, plotOptions: { series: { cursor: 'pointer', events: { click: function (event) { // 点击某个指定点时，执行的事件 console.log(this.name, event.point.x, event.point.y); } } } }, series: [{ name: '东京', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] data: [ [1501689804077.358, 8.0], [1501689814177.358, 6.9], [1501689824277.358, 16.9], [1501689834377.358, 11.9] ] }, { name: '洛杉矶', // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] data: [ [1501689804077.358, 18.0], [1501689814177.358, 16.9], [1501689824277.358, 26.9], [1501689834377.358, 9.9] ] }] }); // chart.addSeries({name:'北京',data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]}); // 参数：数值；是否重绘; isShift; 是否动画 // chart.series[0].addPoint(18); // chart.series[0].addPoint([12]); // chart.series[0].addPoint([v.x, v.y]); // 参数：是否重绘 // chart.series[0].remove(false); // 更新饼图 // $('#id1').highcharts().series[0].data[0].update({x: 0, y: 100})