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>