kindEditor 使用

1. kindEditor简介：

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果。

主要特点：

1. 体积小，加载速度快，但功能十分丰富。2. 内置自定义range，完美地支持span标记。

3. 基于插件的方式设计，所有功能都是插件，增加自定义和扩展功能非常简单。

4. 修改编辑器风格很容易，只需修改一个CSS文件。

5. 支持大部分主流浏览器，比如IE、Firefox、Safari、Chrome、Opera。

界面效果：

官网地址：http://kindeditor.net/demo.php

下载：http://kindeditor.net/down.php

文件目录说明：

├── 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主题

2. 基本使用

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

3. 相关参数：

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

4. 重点实例（上传文件）

前端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: {

                'csrfmiddlewaretoken': '{{ csrf_token }}'

            },

            fileManagerJson: '/kind/file_manager/',

            allowPreviewEmoticons: true,

            allowImageUpload: true

        });

    }

</script>

</body>

</html>

后端视图函数views.py

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

5. 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向后台提交数据的时候，用的是Form方式；其实，kindEditor也支持Ajex的方式提交，只是当Ajax提交表单时，textarea的value还是空的，需要使用sync()去同步HTML数据！

那么在什么时候去同步，怎么同步？KindEditor同时提供了方法：

afterBlur

编辑器失去焦点(blur)时执行的回调函数。

数据类型: Function
默认值: 无

解决办法：

<script type="text/javascript">

        KindEditor.ready(function (K) {

            window.editor = K.create('#AContent', {

                afterBlur: function () { this.sync(); }

            });

        });

</script>

在使用Ajex方式向后台提交数据的时候，遇到问题的小伙伴，可以参考如下地址：

http://www.cnblogs.com/yuejin/p/3747331.html

http://www.cnblogs.com/nangong/p/e7e17fa4ab1a88af4046e828d5d4d243.html

kindEditor 使用的更多相关文章

让kindeditor显示高亮代码
kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...
Kindeditor在ThinkPHP框架下的使用
1.简单调用Kindeditor的图片上传功能: a.Html部署图片预览,记录图片上传成功之后的路径,以及上传图片点击按钮 <tr> <td>活动图片:</td> ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（36）-文章发布系统③-kindeditor使用
系列目录我相信目前国内富文本编辑器中KindEditor 属于前列,详细的中文帮助文档,简单的加载方式,可以定制的轻量级.都是系统的首选很多文章教程有kindeditor的使用,但本文比较特别可能 ...
KindEditor 给KindEditor赋值
在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...
Ajax 提交KindEditor的数据
这次我是在EasyUI中使用了KindEditor的编辑器,按照官方给的代码,总是无法获取编辑器里面的值(内容),如下: KindEditor.ready(function (K) { ...
如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
kindeditor 去掉网络图片上传功能
kindeditor是一款开源的富文本编辑器,其内容设置均为可配置,使用比较灵活. 去掉网络图片的页面:allowImageRemote: false, 修改上传的图片的name:filePostNa ...
关于JqueryEasyUI集合Kindeditor
写在前面上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
jquery弹出下拉列表插件（实现kindeditor的@功能）
这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样).在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求 ...
kindeditor在光标处插入编辑器外的数据
页面 <div class="form-group clearfix"> <label class="control-label col-sm-3 co ...

随机推荐

C++STL 预定义函数对象和函数适配器
预定义函数对象和函数适配器预定义函数对象基本概念:标准模板库STL提前定义了很多预定义函数对象,#include <functional> 必须包含. 1使用预定义函数对象: void ...
s5-11 距离矢量路由选择协议
距离矢量路由选择(Distance Vector:DV) 每个路由器维护一张表,表中列出了当前已知的到每个目标的最佳距离,以及为了到达那个目标,应该从哪个接口转发. 距离矢量路由选择(Distanc ...
详细介绍jQuery.outerWidth() 函数具体用法
outerWidth()函数用于设置或返回当前匹配元素的外宽度.外宽度默认包括元素的内边距(padding).边框(border),但不包括外边距(margin)部分的宽度.你也可以指定参数为true ...
cyclone IV中DDR的一个疑惑
的生成的DDR2 IP中DDR的时钟竟然是双向的,而在arria10中生成的DDR4则是输出,而DDR2的datasheet上也指出ck和ck#是输入,不知为什么? inout mem_clk , i ...
JS库汇总[重要]
库名称说明附加说明 URI 一款js 操作URL的插件功能十分强大.可以增加 .修改.删除.参数 1.Animate.css 2.Hover.css 3.jQuery 4.WebUploa ...
Linux入门(1)——Ubuntu16.04安装搜狗拼音
在网址下载搜狗deb包:http://pinyin.sogou.com/linux/ 将下载的sogoupinyin_2.1.0.0082_amd64.deb放在根目录下. 安装搜狗拼音: ltq@l ...
从MS Word到Windows Live Writer
在做笔记的时候,喜欢使用Word进行排版及插入图片,但是当将笔记发布的时候,一般的网站是不支持直接将Word中的图片进行上传的,此时使用Windows Live Writer是一个不错的选择. 可是, ...
lowbit(x)
int Lowbit(int x) { return x&(-x); } lowbit当中x,-x,补码,反码,傻傻分不清楚.我们先看看两个二进制数相减的问题两个二进制数相减的相关问题两个 ...
转一篇用分布式解决ERP问题
https://www.cnblogs.com/liuche/p/7955462.html
调用GOOGLE的TTS实现文字转语音(XE7+小米2)(XE10.1+小米5)
相关资料: 注意:在手机上必须选安装文字转语音引擎“google Text To Speech”地址:http://www.shouji56.com/soft/GoogleWenZiZhuanYuYi ...

kindEditor 使用

kindEditor 使用的更多相关文章

随机推荐

热门专题