kindEditor 使用
生活随笔
收集整理的這篇文章主要介紹了
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. 相關參數：
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 beautifulsoup4XSS示例：
#!/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__實現單例模式示例:
#!/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向后臺提交數據的時候，用的是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 使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jmeter压测实战：Jmeter二次开
- 下一篇： cf#516B. Equations o