富文编辑器和bs4简单实用
目录
使用方法
直接给输入框绑定事件即可,注意引入js方式有点不一样,多加编码方式
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
}); //添加富文本编辑菜单栏
K.create('要绑定事件的文本输入框id',{初识化数据放在这里})
K.create有两个参数，参数以要绑定标签的id值,参数2,初始化参数
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id',
{
width: '100%', //宽度支持%和px样式
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'
]
})
;
});
官方网址
富文本编辑器官方网站 http://kindeditor.net/docs/option.html#items
图片上传下载实例
视图处理
def up_img(request,):
img_obj = request.FILES.get("imgFile",None)
# 图片的名字默认是imgFile
path=os.path.join(settings.MEDIA_ROOT,"article_img",img_obj.name)# 拿到文件上传的路径,保存到medio文件中,方便访问
# 默认名字是imgFile
with open(path,"wb") as f:
for i in img_obj:
f.write(i)
print(path)
data={
"error":0, # 给编辑器返回上传结果
"url":"/media/article_img/"+img_obj.name # 返回图片路径,编辑器访问浏览器取数据
}
return HttpResponse(json.dumps(data))
注意回复的一定是json格式字符串
js事件
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id',
{
width: '100%',
uploadJson:"/up_img/",
extraFileUploadParams:{ //相当于ajax的data
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
}
})
;
}); //添加富文本编辑菜单栏
filePostName指定上传文件form名称。
数据类型: String
默认值: imgFile
菜单栏功能筛选
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'
],
bs4
导入
pip3 install Beautifulsoup4
提取标签内的文本内容
对某一个标签内容进行提取
soup = BeautifulSoup('<b class="boldest">Extremely bold</b>')
s = soup.b.string
print(s) # Extremely bold
print(type(s)) # <class 'bs4.element.NavigableString'>
对全部内容进行提取
from bs4 import BeautifulSoup
def editor_article(request,):
if request.method == "POST":
title=request.POST.get("title",None)
content=request.POST.get("content",None)
bs=BeautifulSoup(content,"html.parser")
print(22)
desc=bs.text[0:150]+"..."
print(desc)
article_obj=models.Article.objects.create(title=title,desc=desc,user=request.user)
models.ArticleDetail.objects.create(article=article_obj,content=content)
return redirect("/home/")
print(request.user)
return render(request,"editor_article.html",{"request":request})
注意,text不是方法,而是属性,不需要加(),可以对结果进行提取
在编辑框中必须点击,HTML编写文章,后端才能够截取内容,系统默认,输入的内容都是字符串形式
如果不对bs文件进行截取数据,就有可能在文章简介布局时,出现内容错乱问题,主要是因为上传的文件是HTML格式时,在布局HTML中用
artitle.desc|safa
就会出现布局错乱,主要是因为截取的内容不完整,可能截取的标签不闭合,与自己写的标签形成闭合,这样就会出现布局错乱
