前端插件 kindeditor highchart

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>

View Code

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>

View Code

 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))

View Code

提交文章评论时，尽量用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})