KindEditor富文本编辑框和BeautifulSoup的基本使用
KindEditor富文本编辑框
1、进入官网
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: , // 最小宽度（数字）
minHeight: // 最小高度（数字）
});
}
</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: , // 最小宽度（数字）
minHeight: , // 最小高度（数字）
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': ,
'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': ,
'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、BeautifulSoup的基本使用XSS过滤特殊标签
处理依赖
pip3 install beautifulsoup4 安装beautifulsoup
#!/usr/bin/env python
# -*- coding:utf- -*-
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()</script>
</div>
</p>
<p class="story">...</p>""" v = XSSFilter.instance().process(html)
print(v)
XSS示例
#!/usr/bin/env python
# -*- coding:utf- -*-
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()</script>
</div>
</p>
<p class="story">...</p>""" obj = XSSFilter()
v = obj.process(html)
print(v) 基于__new__实现单例模式示例
基于__new__实现单例模式示例
content = """
<p id='i1'>
<script>alert()</script>
bingabcd
</p>
把整个HTML转成对象与对象之间的关系了
<p id='i2'>
<div>
<p>bingabcd</p>
</div>
<img id='i3' src="/static/images\Koala.jpg" alt="" />
</p>
"""
from bs4 import BeautifulSoup
# valid_tag = ['p','img','div']
valid_tag = {#白名单
'p':['class','id'],
'img':['src'],
'div':['class']#允许标签有什么属性
}
soup = BeautifulSoup(content,'html.parser')#创建一个soup对象,,,#html.parser:是HTML内置的解析器 tags = soup.find_all()#遍历所有的标签
for tag in tags:
if tag.name not in valid_tag:#如果标签不在valid_tag列表里
# tag.clear()#把script里的内容删掉了，但是不会删除script标签
tag.decompose()#删除内容和script标签
# print(tag.name) #p script p div p img
if tag.attrs:
for k in list(tag.attrs.keys()):
if k not in valid_tag[tag.name]:
del tag.attrs[k]#
content_str = soup.decode()
print(content_str)
"""
<p id="i1">
<script></script>
bingabcd
</p>
把整个HTML转成对象与对象之间的关系了
<p id="i2">
<div>
<p>bingabcd</p>
</div>
<img alt="" id="i3" src="/static/images\Koala.jpg"/>
</p>
""" # v = soup.find(name='p',attrs={'id':'i2'})
# print(v)
"""
<p id="i2">
<img alt="" id="i3" src="/static/images\Koala.jpg"/>
</p>
""" #BeautifulSoup会根据这个解析器把这个HTML解析成一个一个的对象
# tag_img = soup.find(name='img')#找到HTML中第一个img标签
# print(tag_img)#<img alt="" src="/static/images\Koala.jpg"/> # tag_p = soup.find(name='p')
# print(tag_p)#
"""
<p>
<script>alert()</script>
bingabcd
</p>
""" # v = soup.find_all(name='p')
# print(v)#找到一个列表,一个标签对象一个元素
"""
[<p id="i1">
<script>alert()</script>
bingabcd
</p>, <p id="i2">
<img alt="" id="i3" src="/static/images\Koala.jpg"/>
</p>]
""" # tag = soup.find(name='p')
# sc = tag.find('script')
# print(sc)#<script>alert()</script>
BeautifulSoup的基本使用,这里用于过滤防止XSS攻击的特殊标签,如script
#防止XSS攻击的组件,就是利用BeautifulSoup过滤特殊字符
from bs4 import BeautifulSoup
def xss(old):
valid_tag = {
'p':['class','id'],
'img':['src'],
'div':['class']
}#设置一个白名单 soup = BeautifulSoup(old,'html.parser')
tags = soup.find_all()
for tag in tags:
if tag.name not in valid_tag:
tag.decompose()#删除特殊标签和特殊字符,比如script
if tag.attrs:
for k in list(tag.attrs.key()):
if k not in valid_tag[tag.name]:
del tag.attrs[k]
content_str = soup.decode()
return content_str
utils/XSS组件(防止XSS攻击的组件,就是利用BeautifulSoup过滤特殊字符)
from django.forms import Form
from django.forms import fields
from django.forms import widgets
from django.core.exceptions import ValidationError
from django.core.validators import RegexValidator
from app01 import models class ArticleForm(Form):
title = fields.CharField(max_length=)#标题
content = fields.CharField(
widget=widgets.Textarea(attrs={'id':'i1'})#widget用于生成标签
) def clean_content(self):#定义钩子函数
old = self.cleaned_data['content']
from utils.xss import xss#导入xss组件
return xss(old)#必须有返回值,具体原理看源码 # from bs4 import BeautifulSoup
# soup = BeautifulSoup(old, 'html.parser') # 创建一个soup对象,,,#html.parser:是HTML内置的解析器
# valid_tag = {
# 'p': ['class', 'id'],
# 'img': ['src'],
# 'div': ['class'] #设置白名单, 允许标签有什么属性
# }
# tags = soup.find_all() # 遍历所有的标签
# for tag in tags:
# if tag.name not in valid_tag: # 如果标签不在valid_tag列表里
# # tag.clear()#把script里的内容删掉了，但是不会删除script标签
# tag.decompose() # 删除内容和script标签
# # print(tag.name) #p script p div p img
# if tag.attrs:
# for k in list(tag.attrs.keys()):
# if k not in valid_tag[tag.name]:
# del tag.attrs[k] #
# content_str = soup.decode()
# return content_str
form组件ArticleForm(Form)类
def wangzhe(request):
"""
发布文章
:param request:
:return:
"""
if request.method == "GET":
obj = ArticleForm()
return render(request,'wangzhe.html',{'obj':obj})
else:
obj = ArticleForm(request.POST)
if obj.is_valid():#先验证正则表达式,然后执行钩子函数,执行完,再执行整体
# content = request.POST.get('content')
content = obj.cleaned_data['content']#取到的content一定是替换完毕的content
global CONTENT
CONTENT = content
print(content)
return HttpResponse('ok')
发布文章(过滤关键字用到xss组件)
用textarea变成富文本编辑框
代码示例:
def see(request):
"""
查看用户发来的网页内容,see.html要做一下配置:{{ con|safe }}
:param request:
:return:
"""
return render(request,'see.html',{'con':CONTENT})
接收端
CONTENT = ""
def wangzhe(request):
"""
发布文章
:param request:
:return:
"""
if request.method == "GET":
return render(request,'wangzhe.html')
else:
content = request.POST.get('content')
global CONTENT
CONTENT = content
print(content)
return HttpResponse('ok')
发送端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="/wangzhe.html">
{% csrf_token %}
<div>
<div>文章内容</div>
<div>
<textarea id="i1" name="content"></textarea>
</div>
</div>
<input type="submit" value="提交" />
</form>
<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
<script>
KindEditor.create("#i1",{
width:"800px",
height:"600px",
resizeType:
})
</script> </body>
</html>
发送端html
常用参数:
1.resizeType
2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
- 数据类型: Int
- 默认值: 2
2.uploadJson
指定上传文件的服务器端程序。
- 数据类型: String
- 默认值: basePath + ‘php/upload_json.php’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="/wangzhe.html">
{% csrf_token %}
<div>
<div>文章内容</div>
<div>
<textarea id="i1" name="content"></textarea>
</div>
</div>
<input type="submit" value="提交" />
</form>
<script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>
<script>
KindEditor.create("#i1",{
width:"1000px",
height:"600px",
resizeType:,
uploadJson:'/upload_img.html',
extraFileUploadParams:{
"csrfmiddlewaretoken":"{{ csrf_token }}"
}
})
</script> </body>
</html>
KindEditor上传图片文件
def upload_img(request):
"""
接收用户发来的图片
:param request:
:return:
"""
import os
file_obj = request.FILES.get('imgFile')
file_path = os.path.join('static/images',file_obj.name)
with open(file_path,'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk) dic = {
'error': ,
'url': '/'+file_path,
# 'url': '/static/imgs/20130809170025.png',
'message': '错误了...'
}
import json
return HttpResponse(json.dumps(dic))
# print(request.POST,request.FILES)#<QueryDict: {'csrfmiddlewaretoken': ['iGwBmAXvo9mc9cbfzYH4uz5g5UgWVObyG2zGuxOBUO3dWjcLoXq0UJHWrExUuDMl'], 'localUrl': ['C:\\fakepath\\Koala.jpg']}> <MultiValueDict: {'imgFile': [<InMemoryUploadedFile: Koala.jpg (image/jpeg)>]}>
views.py upload_img函数
KindEditor富文本编辑框和BeautifulSoup的基本使用的更多相关文章
- UEditor富文本编辑框学习
1.首先需要引入CSS.JS <!--富文本编辑框--> <link href="${pageContext.request.contextPath}/css/plugin ...
- 使用Flask-CKEditor集成富文本编辑框
使用Flask-CKEditor集成富文本编辑框 富文本编辑器即所见即所得编辑器,类似于文本编辑软件.它提供一系列按钮和下拉列表来为文本设置格式,编辑状态的文本样式即最终呈现出来的样式.在Web程序中 ...
- java-selenium（二）富文本编辑框的处理
首先先看一下什么是富文本编辑框 HTML源码 思路:首先先进入到iframe中,再用js写,最后切出iframe 如果想要换行可以在换行的地方加上<br> 如果添加的文本中包含单引号.双引 ...
- node.js+express+jade系列七：富文本编辑框的使用
下载nicEdit富文本编辑框, 把nicEdit.js文件放到public/javascripts/下 新建jade文件:代码如下 doctype htmlhtml head t ...
- Django文件上传下载与富文本编辑框
django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...
- Jeesite富文本编辑框ckeditor显示错误
Jeesite富文本编辑框ckeditor显示错误 原文链接:https://www.toutiao.com/i6485135618190869005/ Jeesite中Control都会继承一个Ba ...
- kindeditor富文本框，上传文件后，显示文件名称
kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...
- 百度ueditor新增的将word内容导入到富文本编辑框的功能.
如何做到 ueditor批量上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 在线文本的编辑框——kindeditor富文本编辑的使用
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...
随机推荐
- Python开篇——Python的哲学
今天奉上Python设计哲学,宣告着自己正式开始系统的学习Python The Zen of Python, by Tim Peters Beautiful is better than ugly.E ...
- JS正则表达式从入门到入土（2）—— 元字符和字符类
元字符和字符类 元字符 正则表达式由两种基本字符类型组成: 1.原义(正常)文本字符:代表本身含义的字符,如:a.b.c.1.2.3等. 2.元字符:元字符是在正则表达式中有特殊含义的非字母字符,如\ ...
- Django学习笔记之CBV和FBV
FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV CBV(class base v ...
- 关于MVC 中EF调用存储过程
Entity Framework 4.3 中使用存储过程 分类:ASP.NET MVC 3, ASP.NET 0 尽管 Entit ...
- Python高级语法之：一篇文章了解yield与Generator生成器
Python高级语法中,由一个yield关键词生成的generator生成器,是精髓中的精髓.它虽然比装饰器.魔法方法更难懂,但是它强大到我们难以想象的地步:小到简单的for loop循环,大到代替多 ...
- linux ftp 简单搭建
1.安装 yum install vsftpd 2.重启服务 /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vsft ...
- php-fpm 信号
使用信号之前,需要先确保php-fpm.conf 里面有配置pid,默认是被注释掉的. ;pid = run/php-fpm.pid 文件在 php安装目录/var/run/php-fpm.pid 信 ...
- jdbctemplate中的queryForInt方法
今天才发现,原来spring 3.2.2之后,jdbctemplate中的queryForInt已经被取消了! 看下代码: 原来是这样写的: String sql = "SELECT cou ...
- Finder Quick Menu FAQ
How to use Finder Quick Menur: 1. Start Finder Quick Menu.2. Open "System Preferences -> Ext ...
- [BZOJ2091]The Minima Game
Description 给出N个正整数,AB两个人轮流取数,A先取.每次可以取任意多个数,直到N个数都被取走.每次获得的得分为取的数中的最小值,A和B的策略都是尽可能使得自己的得分减去对手的得分更大. ...