KindEditor

2、下载

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

3、文件夹说明

├── 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      // 最小高度（数字）
　　　　　　　// 更多见 http://kindeditor.net/docs/option.html


        });

    }

</script>

5、详细参数

　　http://kindeditor.net/docs/option.html

　　重点说明几个常用的解释一下：

　　items：配置编辑器的工具栏中显示哪些工具，其中”/”表示换行，”|”表示分隔符。示例： items: [ 'source', '|', 'undo', 'redo', ]

　 noDisableItems：不禁用的工具项，需要依赖designMode:false 起效。示例：

　 filterMode：防范XSS攻击，对输入代码进行过滤，值为false的时候允许所有html标签。默认为true,只允许一些指定的html标签输入&保存

　　wellFormatMode：true时美化HTML数据。默认true

　　resizeType：2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

　　themeType：指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。默认值default

　　useContextmenu：true时使用右键菜单，false时屏蔽右键菜单

　　syncType：同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。

　　uploadJson：指定上传文件的服务器端程序(POST 请求url路径)。举例：uploadJson: '/upload_file/', 上传到： http://127.0.0.1:8000/upload_file/?dir=image

　　allowImageUpload：true时显示图片上传按钮。

allowFlashUpload：true时显示Flash上传按钮。

　 allowMediaUpload：true时显示视音频上传按钮。

　　allowFileUpload：true时显示文件上传按钮。

　　allowFileManager：true时显示浏览远程服务器按钮。文件管理：默认false

　 autoHeightMode：值为true，并引入autoheight.js插件时自动调整高度。

　　fileManagerJson：指定浏览远程图片的服务器端程序。即访问文件管理的URL路径

　 extraFileUploadParams：上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

　　例如CSRF参数：

extraFileUploadParams: {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
},
　　
  filePostName：指定上传文件form名称。

6、上传文件示例

　　django 渲染模板 html

<!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: {　　// 上传图片是需要设置。单个图片上传这里采用的是form + iframe 实现的，djanjo 处理时 form表单需要提交csrfmiddlewaretoken的csrftoken

                'csrfmiddlewaretoken': '{{ csrf_token }}'

            },

            fileManagerJson: '/kind/file_manager/',

            allowPreviewEmoticons: true,　　//允许表情预览

            allowImageUpload: true　　//显示图片上传按钮

        });

    }

</script>

</body>

</html>

django - views.py

文件上传

from django.shortcuts import render

from django.shortcuts import HttpResponse

from django.views import View

import json

import os

from io import BytesIO

from utils.check_code import create_validate_code

# Create your views here.

class UploadFile(View):

    def get(self, request):

        pass

    def post(self, request):

        """

        文件上传

        :param request:

        :return:

        """

        print(request.FILES)

        file = request.FILES.get('imgFile')

        SUB_DIR = request.get_full_path().split("=")[1]

        print(SUB_DIR)

        UPLOAD_BASE_DIR = 'static/upload_file/'

        save_uri = UPLOAD_BASE_DIR + SUB_DIR + 's/' + file.name

        print(save_uri)

        with open(save_uri, 'wb') as f:

            for items in file.chunks():

                f.write(items)

        dic = {

            'error': 0, 　　// 为0表示上传无误

            'url': '/' + save_uri, 　　//返回文件地址，前端获取用来生成img标签

            'message': '错误了...'

        }

        ret = HttpResponse(json.dumps(dic))

        ret['X-Frame-Options'] = None　　　　//此参数默认为deny 浏览器会禁止解析展示

        return ret

class Kind(View):

    def get(self, request):

        return render(request, 'kindeditor/simple1.html')

文件管理

class FileManager(View):

    def get(self, request):

        dic = {}

        root_path = 'D:/Python3_study/s14day19_2/static/upload_file/'   # 代码所在操作系统存储文件的绝对路径

        static_root_path = '/static/upload_file/'                      # 请求url文件基础路径

        request_path = request.GET.get('path')

        if request_path:

            print('获取到请求路径：', request_path)

            abs_current_dir_path = os.path.join(root_path, request_path)

            # 获取当前请求路径的上一级目录名：

            # 1.如果当前请求路径是第一级目录，则上一级目录为空字符串，即：文件管理根目录。

            # 2.如果当前请求路径是二级以上子目录，则会有上一级目录名

            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)

        print('current_url：', dic.get('current_url'))

        print('current_dir_path：', dic.get('current_dir_path'))

        print('moveup_dir_path：', dic.get('moveup_dir_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))

7、XSS过滤特殊标签

处理依赖

pip3 install beautifulsoup4

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': []

        }

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

基于__new__实现单例模式示例

#!/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)

巴特西

前端文本框插件KindEditor

KindEditor

最新文章

热门文章