當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

kindEditor 使用

發(fā)布時間：2023/10/11 综合教程 91 老码农

生活随笔收集整理的這篇文章主要介紹了 kindEditor 使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. kindEditor簡介：

KindEditor是一套開源的HTML可視化編輯器，主要用于讓用戶在網(wǎng)站上獲得所見即所得編輯效果。

主要特點：

1. 體積小，加載速度快，但功能十分豐富。2. 內(nèi)置自定義range，完美地支持span標記。

3. 基于插件的方式設(shè)計，所有功能都是插件，增加自定義和擴展功能非常簡單。

4. 修改編輯器風格很容易，只需修改一個CSS文件。

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

界面效果：

官網(wǎng)地址：http://kindeditor.net/demo.php

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

文件目錄說明：

├── asp                      asp示例

├── asp.net                  asp.net示例

├── attached                 空文件夾，放置關(guān)聯(lián)文件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內(nèi)部使用的插件

└── 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%',       // 文本框?qū)挾?可以百分比或像素)

            height: '300px',     // 文本框高度(只能像素)

            minWidth: 200,       // 最小寬度（數(shù)字）

            minHeight: 400      // 最小高度（數(shù)字）

        });

    }

</script>

3. 相關(guān)參數(shù)：

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

4. 重點實例（上傳文件）

前端html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div>

    <h1>文章內(nèi)容</h1>

    {{ request.POST.content|safe }}

</div>

<form method="POST">

    <h1>請輸入內(nèi)容：</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%',       // 文本框?qū)挾?可以百分比或像素)

            height: '300px',     // 文本框高度(只能像素)

            minWidth: 200,       // 最小寬度（數(shù)字）

            minHeight: 400,      // 最小高度（數(shù)字）

            uploadJson: '/kind/upload_img/',

            extraFileUploadParams: {

                'csrfmiddlewaretoken': '{{ csrf_token }}'

            },

            fileManagerJson: '/kind/file_manager/',

            allowPreviewEmoticons: true,

            allowImageUpload: true

        });

    }

</script>

</body>

</html>

后端視圖函數(shù)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  class="sister c1" style='color:red;background-color:green;' id="link1"><!-- Elsie --></a>

                            <a  class="sister" id="link2">Lacie</a> and

                            <a  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__實現(xiàn)單例模式示例:

#!/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  class="sister c1" style='color:red;background-color:green;' id="link1"><!-- Elsie --></a>

                            <a  class="sister" id="link2">Lacie</a> and

                            <a  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向后臺提交數(shù)據(jù)的時候，用的是Form方式；其實，kindEditor也支持Ajex的方式提交，只是當Ajax提交表單時，textarea的value還是空的，需要使用sync()去同步HTML數(shù)據(jù)！

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

afterBlur

編輯器失去焦點(blur)時執(zhí)行的回調(diào)函數(shù)。

數(shù)據(jù)類型: Function
默認值: 無

解決辦法：

<script type="text/javascript">

        KindEditor.ready(function (K) {

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

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

            });

        });

</script>

在使用Ajex方式向后臺提交數(shù)據(jù)的時候，遇到問題的小伙伴，可以參考如下地址：

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

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

總結(jié)

以上是生活随笔為你收集整理的kindEditor 使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Jmeter压测实战：Jmeter二次开
下一篇： cf#516B. Equations o