1、进入官网

2、下载

  • 官网下载：http://kindeditor.net/down.php
  • 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

3、文件夹说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── 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、基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

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过滤特殊标签

处理依赖

1
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__实现单例模式示例

Python学习-KindEditor-富文本编辑框的更多相关文章

  1. KindEditor富文本编辑框和BeautifulSoup的基本使用

    KindEditor富文本编辑框 1.进入官网 2.下载 官网下载:http://kindeditor.net/down.php 本地下载:http://files.cnblogs.com/files ...

  2. UEditor富文本编辑框学习

    1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...

  3. 使用Flask-CKEditor集成富文本编辑框

    使用Flask-CKEditor集成富文本编辑框 富文本编辑器即所见即所得编辑器,类似于文本编辑软件.它提供一系列按钮和下拉列表来为文本设置格式,编辑状态的文本样式即最终呈现出来的样式.在Web程序中 ...

  4. java-selenium（二）富文本编辑框的处理

    首先先看一下什么是富文本编辑框 HTML源码 思路:首先先进入到iframe中,再用js写,最后切出iframe 如果想要换行可以在换行的地方加上<br> 如果添加的文本中包含单引号.双引 ...

  5. node.js+express+jade系列七：富文本编辑框的使用

    下载nicEdit富文本编辑框, 把nicEdit.js文件放到public/javascripts/下 新建jade文件:代码如下 doctype htmlhtml    head        t ...

  6. Django文件上传下载与富文本编辑框

    django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...

  7. Jeesite富文本编辑框ckeditor显示错误

    Jeesite富文本编辑框ckeditor显示错误 原文链接:https://www.toutiao.com/i6485135618190869005/ Jeesite中Control都会继承一个Ba ...

  8. kindeditor富文本框，上传文件后，显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  9. 百度ueditor新增的将word内容导入到富文本编辑框的功能.

    如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  10. 在线文本的编辑框——kindeditor富文本编辑的使用

    .personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

随机推荐

  1. DP上课覆盖知识点，POJ(1513)

    题目链接:http://poj.org/problem?id=1513 解题报告: 思路: 知识点从第二个开始扫,递推表达式是:minlec[i]=min(minlec[k])+1,并且要保证,tim ...

  2. Veritas NetBackup™ 状态码"十大"常见报错状态码

    我在刚开始学习Netbackup的时候,没少走弯路.经常会遇到各种稀奇古怪的 error 信息,遇到报错会很慌张,急需一个解决问题的办法.跟无头苍蝇一样,会不加思索地把错误粘到百度上,希望赶紧查找一下 ...

  3. 百度非会员满速下载利器（IDM）Internet Download Manager v6.30.8 中文特别版

    下载利器(IDM)Internet Download Manager v6.30.8 中文特别版 所属分类:工具软件 应用平台:Windows 资源版本:v6.30.8 最后更新:2018年04月14 ...

  4. machine learning学习笔记

    看到Max Welling教授主页上有不少学习notes,收藏一下吧,其最近出版了一本书呢还,还没看过. http://www.ics.uci.edu/~welling/classnotes/clas ...

  5. postgresql 免安装版使用

    免安装版 postgresql 使用 1.首先使用 initdb 初始化数据目录 initdb --pgdata=data --encoding=UTF8 --locale=C 2.启动 postgr ...

  6. RHEL7.X安装12.2RAC时root.sh错误CLSRSC-400的解决方案

    问题现象: [root@ora12c ghome]# /opt/oracle/ghome/root.sh Performing root user operation. The following e ...

  7. SQL关于删除的三个语句：DROP、TRUNCATE、 DELETE 的区别。

    DROP: DROP TABLE test; 删除表test,并释放空间,将test删除的一干二净. TRUNCATE: TRUNCATE test; 删除表test里的内容,并释放空间,但不删除表的 ...

  8. SpringMVC注解@RequestParam解析

    1.可以对传入参数指定参数名 1 @RequestParam String inputStr 2 // 下面的对传入参数指定为param,如果前端不传param参数名,会报错 3 @RequestPa ...

  9. php-5.6.26源代码 - PHP文件汇编成opcode、执行

    文件 php-5.6.26/Zend/zend.c ZEND_API int zend_execute_scripts(int type TSRMLS_DC, zval **retval, int f ...

  10. 初试PHP连接sql server

    最开始想使用 pdo_sqlsrv 拓展,但是一直没成功,本文采用的是 pdo_dblib + freetds. 环境:CentOS 6.8.PHP 5.6.20 freetds wget ftp:/ ...