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. android+nutz后台如何上传和下载图片

    android+nutz后台如何上传和下载图片  发布于 588天前  作者 yummy222  428 次浏览  复制  上一个帖子  下一个帖子  标签: 无 最近在做一个基于android的ap ...

  2. POJ-2229 Sumsets---完全背包变形

    题目链接: https://vjudge.net/problem/POJ-2229 题目大意: 给定一个N,只允许使用2的幂次数,问有多少种不同的方案组成N. 思路: 处理出2的幂次方的所有的数字,当 ...

  3. 图像上采样(图像插值)增取样（Upsampling）或内插（Interpolating）下采样(降采样)，

    缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1.使得图像符合显示区域的大小:2.生成对应图像的缩略图.放大图像(或称为上采样(upsamplin ...

  4. 继承FileInputFormat类来理解 FileInputFormat类

    import java.io.IOException; import java.util.ArrayList; import java.util.List; import org.apache.had ...

  5. Python 初始—(多级字典)

    字典中 嵌套字典 如同json 对象, data={ "msg":{ “xxx.com”:["a","b"] } } data.values ...

  6. hibernate系列之四

    数据库中表之间的关系: 一对一.一对多.多对多 一对多的建表原则:在多的一方创建外键指向一的一方的主键: 多对多的建表原则:创建一个中间表,中间表中至少有两个字段作为外键分别指向多对多双方的主键: 一 ...

  7. Nginx+php+mysql+wordpress搭建自己的博客站点

    服务器环境要求Centos 6 或以上版本(由于我们的目标是半小时内搭建好,那就选简单yum安装)MySQL 5或更新版本Nginx 1或更新版本PHP 5 或更新版本 php-fpm 5或更新版本 ...

  8. Docker自学纪实（二）Docker基本操作

    安装docker 以CentOS7为例: 安装:yum -y install docker 启动:systemctl start docker 设置开机自启:systemctl enable dock ...

  9. Linux进程通信之匿名管道

    进程间的通信方式 进程间的通信方式包括,管道.共享内存.信号.信号量.消息队列.套接字. 进程间通信的目的 进程间通信的主要目的是:数据传输.数据共享.事件通知.资源共享.进程控制等. 进程间通信之管 ...

  10. pip更改国内源

    国内源: 阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/豆瓣(dou ...