富文本框KindEditor和beautifulsoup4模块

一、富文本框KindEditor

1、官网下载:http://kindeditor.net/down.php

放在项目static/kindeditor/目录下

2、html页面引入kindeditor文件:

<script src = "/static/kindeditor/kindeditor-all.js"> </script>
<script src="/static/js/jquery-3.2.1.min.js"></script>

<div>
    <textarea name="article_content" id="article" cols="30" rows="10"></textarea>
</div>

3、js属性

<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article',{                   // #article,即为textarea  的id号
                    width:"900px",
                    height:"500px",
                    uploadJson:"/upload/",
                    items:[
        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
        'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
        'anchor', 'link', 'unlink', '|', 'about'
]
                    extraFileUploadParams:{
                        "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()
                    },
                    filePostName:"upload_img"
                });
        });
</script>

views.py文件增加上传文件视图函数:

def upload(request):
    print(request.FILES)
    obj=request.FILES.get("upload_img")
    path=os.path.join(settings.MEDIA_ROOT,"articles",obj.name)
    with open(path,"wb") as f:
        for line in obj:
            f.write(line)
    res={
        "error":0,
        "url":"/media/articles/"+obj.name
    }
    return HttpResponse(json.dumps(res))

4、items说明

items对应选项图标说明:

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

二、beautifulsoup4模块

Beautiful Soup 4.2.0文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html

官方文档:http://beautifulsoup.readthedocs.io/zh_CN/latest/

1、基本使用:容错处理,文档的容错能力指的是在html代码不完整的情况下,使用该模块可以识别该错误。使用BeautifulSoup解析上述代码,能够得到一个 BeautifulSoup 的对象,并能按照标准的缩进格式的结构输出

##pip3 install beautifulsoup4                        #安装beautifulsoup4  模块

from bs4 import BeautifulSoup
def add_article(request):
    if request.method=="POST":
        title=request.POST.get("title")
        article_content=request.POST.get("article_content")
        bs=BeautifulSoup(article_content,"html.parser")           #html.parser是python自带的解析器,处理标签字符串
        for tag in bs.find_all():               #  过滤content
            if tag.name=="script":              #查找script标签
                # print(tag.name)
                tag.decompose()                  #从文档树中删除
        article_content=bs.prettify()              #处理好缩进,结构化显示
        desc=bs.text[0:150]                        #bs.text查找所有的文本内容
        obj=Article.objects.create(user=request.user,title=title,desc=desc)
        ArticleDetail.objects.create(article=obj,content=article_content)
        return HttpResponse("OK")
    return render(request,"add_article.html")

2、介绍

下表列出了主要的解析器,以及它们的优缺点,官网推荐使用lxml作为解析器,因为效率更高. 在Python2.7.3之前的版本和Python3中3.2.2之前的版本,必须安装lxml或html5lib, 因为那些Python版本的标准库中内置的HTML解析方法不够稳定.

3、几个简单的浏览结构化数据的方法

要处理的html代码:

html_doc = """
<html><head><title>The Dormouse's story</title></head>
<body>
<p class="title"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" 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">Tillie</a>;
and they lived at the bottom of a well.</p>
<p class="story">...</p>
"""
soup.title
# <title>The Dormouse's story</title>

soup.title.name
# u'title'

soup.title.string
# u'The Dormouse's story'

soup.title.parent.name
# u'head'

soup.p                                          #存在多个相同的标签则只返回第一个
# <p class="title"><b>The Dormouse's story</b></p>

soup.p['class']
# u'title'

soup.a                                         #存在多个相同的标签则只返回第一个
# <a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>

soup.find_all('a')
# [<a class="sister" href="http://example.com/elsie" id="link1">Elsie</a>,
#  <a class="sister" href="http://example.com/lacie" id="link2">Lacie</a>,
#  <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>]

soup.find(id="link3")
# <a class="sister" href="http://example.com/tillie" id="link3">Tillie</a>

for link in soup.find_all('a'):               #从文档中找到所有<a>标签的链接:
    print(link.get('href'))
    # http://example.com/elsie
    # http://example.com/lacie
    # http://example.com/tillie
print(soup.get_text())                          #从文档中获取所有文字内容:

#嵌套选择
print(soup.head.title.string)
print(soup.body.a.string)

#子节点、子孙节点
print(soup.p.contents) #p下所有子节点
print(soup.p.children) #得到一个迭代器,包含p下所有子节点

for i,child in enumerate(soup.p.children):
    print(i,child)
    
print(soup.p.descendants) #获取子孙节点,p下所有的标签都会选择出来
for i,child in enumerate(soup.p.descendants):
    print(i,child)
    
#父节点、祖先节点
print(soup.a.parent) #获取a标签的父节点
print(soup.a.parents) #找到a标签所有的祖先节点,父亲的父亲,父亲的父亲的父亲...

#兄弟节点
print('=====>')
print(soup.a.next_sibling) #下一个兄弟
print(soup.a.previous_sibling) #上一个兄弟

print(list(soup.a.next_siblings)) #下面的兄弟们=>生成器对象
print(soup.a.previous_siblings) #上面的兄弟们=>生成器对象

4、简单使用

from bs4 import BeautifulSoup
soup = BeautifulSoup(open("index.html"))
soup = BeautifulSoup("<html>data</html>")

然后,Beautiful Soup选择最合适的解析器来解析这段文档,如果手动指定解析器那么Beautiful Soup会选择指定的解析器来解析文档。

5、搜索文档数

from bs4 import BeautifulSoup
soup= BeautifulSoup(html_doc,"lxml")

# 1、字符串:特点:是一种完全匹配的
print(soup.find_all(name="a"))                                  #找到所有的a标签
print(soup.find_all(name="a aa"))                               #找不到,会打印一个[]
print(soup.find_all(attrs={"class":"sister"}))
print(soup.find_all(text="The Dormouse's story"))            #按照文本来找
print(soup.find_all(name="b",text="The Dormouse's story"))  #找标签名是b,并且文本是The Dormouse's story
print(soup.p.find(name="b").text)                               #第一个p标签的b里面的文本
print(soup.find_all(name="p",attrs={"class":"story"}))        #找到标签名是p,属性名是class,
print(soup.find(name="p",attrs={"class":"story"}).find_all(name="a")[2])  #找到标签名是p,属性名是class的第二个a标签

# 2、正则
import re
print(soup.find_all(name=re.compile("^b")))                     #找b开头的的标签
print(soup.find_all(attrs={"id":re.compile("link")}))           #找到id属性是link的
print(soup.find_all(text=re.compile(r"\$")))                     #找带有$价钱的文本

# 3、列表:如果传入列表参数,Beautiful Soup会将与列表中任一元素匹配的内容返回.
print(soup.find_all(name=["a",re.compile("^b")]))                #找a标签或者b标签开头的所有的标签
print(soup.find_all(text=["$",]))  #找不到
print(soup.find_all(text=[re.compile(r"\$")]))                   #['$75']
print(soup.find_all(text=["a",re.compile(r"\$")]))

# 4、True:可以匹配任何值
print(soup.find_all(name=True))                                 #找到所有标签的标签名
print(soup.find_all(attrs={"id":True}))                        #找到只要有id属性的
print(soup.find_all(name="p",attrs={"id":True}))               # 找到有id属性的p标签

# 5、方法:如果没有合适过滤器,那么还可以定义一个方法,方法只接受一个元素参数 ,如果这个方法返回 True 表示当前元素匹配并且被找到,如果不是则反回 False
# 有class属性没有id属性的
def has_class_not_id(tag):
    return tag.has_attr('class') and not tag.has_attr('id')
    # return tag.has_attr('id') and not tag.has_attr('class')
    # return tag.name =="a" and tag.has_attr("class") and not tag.has_attr("id")
    
 #     #只找a标签
print(soup.find_all(has_class_not_id))                          #默认是按照标签来找的
print(soup.find_all(name="a",limit=2))                          #找所有的a标签,只找前两个
print(soup.body.find_all(attrs={"class":"sister"},recursive=False))#找属性为sister的
print(soup.html.find_all('a'))
print(soup.html.find_all('a',recursive=False))
# recursive = True  #从子子孙孙都找到了
# recursive = False #如果只想搜索tag的直接子节点(就不往里面找了),可以使用参数 recursive=False .

# **kwargs
print(soup.find_all(attrs={"class":"sister"}))
print(soup.find_all(class_="sister"))  #这两个是一样的
print(soup.find_all(attrs={"id":"link3"})) #这两个是一样的,只是表示方式不一样
print(soup.find_all(id="link3"))

6、find_all( name , attrs , recursive , text , **kwargs )

#2.1、name: 搜索name参数的值可以使任一类型的 过滤器 ,字符窜,正则表达式,列表,方法或是 True .
print(soup.find_all(name=re.compile('^t')))

#2.2、keyword: key=value的形式,value可以是过滤器:字符串 , 正则表达式 , 列表, True .
print(soup.find_all(id=re.compile('my')))
print(soup.find_all(href=re.compile('lacie'),id=re.compile('\d'))) #注意类要用class_
print(soup.find_all(id=True)) #查找有id属性的标签

# 有些tag属性在搜索不能使用,比如HTML5中的 data-* 属性:
data_soup = BeautifulSoup('<div data-foo="value">foo!</div>','lxml')
# data_soup.find_all(data-foo="value") #报错:SyntaxError: keyword can't be an expression
# 但是可以通过 find_all() 方法的 attrs 参数定义一个字典参数来搜索包含特殊属性的tag:
print(data_soup.find_all(attrs={"data-foo": "value"}))
# [<div data-foo="value">foo!</div>]

#2.3、按照类名查找,注意关键字是class_,class_=value,value可以是五种选择器之一
print(soup.find_all('a',class_='sister')) #查找类为sister的a标签
print(soup.find_all('a',class_='sister ssss')) #查找类为sister和sss的a标签,顺序错误也匹配不成功
print(soup.find_all(class_=re.compile('^sis'))) #查找类为sister的所有标签

#2.4、attrs
print(soup.find_all('p',attrs={'class':'story'}))

#2.5、text: 值可以是:字符,列表,True,正则
print(soup.find_all(text='Elsie'))
print(soup.find_all('a',text='Elsie'))

#2.6、limit参数:如果文档树很大那么搜索会很慢.如果我们不需要全部结果,可以使用 limit 参数限制返回结果的数量.效果与SQL中的limit关键字类似,当搜索到的结果数量达到 limit 的限制时,就停止搜索返回结果
print(soup.find_all('a',limit=2))

#2.7、recursive:调用tag的 find_all() 方法时,Beautiful Soup会检索当前tag的所有子孙节点,如果只想搜索tag的直接子节点,可以使用参数 recursive=False .
print(soup.html.find_all('a'))
print(soup.html.find_all('a',recursive=False))

'''
像调用 find_all() 一样调用tag
find_all() 几乎是Beautiful Soup中最常用的搜索方法,所以我们定义了它的简写方法. BeautifulSoup 对象和 tag 对象可以被当作一个方法来使用,这个方法的执行结果与调用这个对象的 find_all() 方法相同,下面两行代码是等价的:
soup.find_all("a")
soup("a")
这两行代码也是等价的:
soup.title.find_all(text=True)
soup.title(text=True)
'''
3、find( name , attrs , recursive , text , **kwargs )
find_all() 方法将返回文档中符合条件的所有tag,尽管有时候我们只想得到一个结果.比如文档中只有一个<body>标签,那么使用 find_all() 方法来查找<body>标签就不太合适, 使用 find_all 方法并设置 limit=1 参数不如直接使用 find() 方法.下面两行代码是等价的:
soup.find_all('title', limit=1)                # [<title>The Dormouse's story</title>]
soup.find('title')                              # <title>The Dormouse's story</title>

唯一的区别是 find_all() 方法的返回结果是值包含一个元素的列表,而 find() 方法直接返回结果.
find_all() 方法没有找到目标是返回空列表, find() 方法找不到目标时,返回 None .
print(soup.find("nosuchtag"))                   # None

soup.head.title 是 tag的名字 方法的简写.这个简写的原理就是多次调用当前tag的 find() 方法:
soup.head.title                                  # <title>The Dormouse's story</title>
soup.find("head").find("title")               # <title>The Dormouse's story</title>

原文地址:http://blog.51cto.com/qidian510/2122296

时间: 2024-10-09 17:29:41

富文本框KindEditor和beautifulsoup4模块的相关文章

富文本框KindEditor的使用技巧

富文本框KindEditor的使用技巧 最近在项目中经常遇到使用富文本框的情况,当然我们所接触的富文本.框有很多,我个人还是比较偏向于KE(KindEditor)),用起来比较舒服,但是很多新手在用的时候往往会感到不知所措.总感觉API写了很多但是就是不知道怎么去用,今天我就和大家讲讲KE的使用和基本技巧: 第一步:我们需要到官网上引用相关的资源包,点击进入官网下载资源包 第二步:引用资源文件 如图所示第一个default.css主要是为了修改我们KE的样式,第二个kindeditor-min.

KindEditor富文本框编辑器上传图片功能实现,基于java项目

1. HTML标签与jquery代码 <textarea id="editor_id" style="width: 200px; height: 200px;"></textarea> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/java

kindeditor富文本框,上传文件后,显示文件名称

kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定之后,内容中显示的只是一串很长的地址,这并不是我们想要的. 更多的时候,我们只是希望它这里能默认显示文件名称,只有在文件说明里,填写了文件名称,在内容里面才会以名称的形式呈现.这个时候,我们就要给它做个小手术,来完善它,下面贴出代码: 1.修改asp.net/upload_json.ashx文件,大

使用kindeditor获取不到富文本框中的值

获取不到富文本框中的值,网上一搜一堆,但最终没有几个能解决问题的,折腾一番最终解决.注意就是红色代码,加上之后就可以解决问题了. KindEditor.ready(function (K) { var editor1 = K.create('#AContents', { cssPath: '/Content/kindeditor/plugins/code/prettify.css', uploadJson: '/Content/kindeditor/asp.net/upload_json.ash

第三百九十四节,Django+Xadmin打造上线标准的在线教育平台—Xadmin集成富文本框

第三百九十四节,Django+Xadmin打造上线标准的在线教育平台-Xadmin集成富文本框 首先安装Django Ueditor1.8.143模块 下载地址 https://pypi.python.org/pypi/DjangoUeditor/1.8.143 下载后  python setup.py install  安装 安装好后在settings.py将DjangoUeditor添加到app INSTALLED_APPS = [ 'django.contrib.admin', 'djan

富文本编辑器KindEditor的使用

       富文本编辑器KindEditor,是一种可内嵌于浏览器,所见即所得的文本编辑器.它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色.大小.样式等信息问题一个文本编辑器 第一步 引入三个文件(一个css,两个js) 第二步 创建textarea控件 第三步 创建初始化方法createEditor (1) (2)select代表textarea对象,return返回一个富文本编辑对象,也就是(1)中的itemAddEditor (3) 至此初始化完成 当需要提

angular延时函数和数据加载完才显示主要的页面、上传文件到后端、富文本框编辑框(ckeditor)

延时函数 setTimeout(()=>{ console.log("延时打印") },10000); // 延时10秒打印 //简单等数据加载完才显示主要的页面 1.先下载ngx-loading模块 npm install --save ngx-loading 2.在app.module.ts中引入NgxLoadingModule模块 import {NgxLoadingModule} from 'ngx-loading'; imports: [ BrowserModule,

selenium处理富文本框,日历控件等 调用JS修改value值

http://blog.csdn.net/fudax/article/details/8089404 document.getElementById("js_domestic_fromdate").value = "2014-10-10" selenium处理富文本框,日历控件等 调用JS修改value值,布布扣,bubuko.com

[布局]记录部件字段富文本框如何设置统一高度

在使用快速开发平台构建业务功能中,往往都会用到记录部件,如何布局各个字段位置使用户一目了然,往往就是我们头大的问题.在一个固定大小的窗体下,各个字段的样式都是系统自动默认的,如下图: 此种布局方式真是惨不忍睹,那么如何布局多个富文本字段的位置才能使界面简单明了呢?今天为大家带来记录部件中富文本框(数据表中字段编辑类型word)的布局方法:首先在 空白区域鼠标右键唤出菜单[定制版面],单击进入[记录部件布局定制]模式: 选中富文本字段,鼠标右键点击[创建群组]: 群组创建完成,在顶部空白区域右键唤